**Course Title:** Modern JavaScript Programming: From Fundamentals to Full-Stack Development **Section Title:** Front-End Development with React **Topic:** Functional components and hooks (useState, useEffect) In this topic, we will delve into the world of functional components and explore two of the most commonly used hooks in React: `useState` and `useEffect`. By the end of this topic, you will have a solid understanding of how to create and manage state in functional components, as well as how to handle side effects using `useEffect`. **What are functional components?** In React, components can be either functional or class-based. Functional components are simply functions that return JSX elements. They are often used for presentational components, which are responsible for rendering UI elements based on props, but do not manage their own state. ```jsx import React from 'react'; function Hello() { return <h1>Hello, World!</h1>; } ``` **Introduction to Hooks** Hooks are a new way of handling state and side effects in functional components. They were introduced in React 16.8 as a way to make functional components more powerful and flexible. Hooks allow you to "hook into" React state and lifecycle methods from functional components. This makes it possible to use state and other React features without having to write class components. **The useState Hook** The `useState` hook is used to add state to functional components. It returns an array with two values: the current state value and a function that updates it. ```jsx import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } ``` In this example, we use the `useState` hook to create a state variable `count` and a function `setCount` to update it. We then use the `count` state variable to render a p element and a button. When the button is clicked, the `setCount` function is called with the new count value. **The useEffect Hook** The `useEffect` hook is used to handle side effects in functional components. Side effects are actions that affect the outside world, such as making API calls, setting timers, or updating the DOM. ```jsx import React, { useState, useEffect } from 'react'; function Timer() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { setCount(count + 1); }, 1000); return () => { clearInterval(timer); }; }, [count]); return <p>Count: {count}</p>; } ``` In this example, we use the `useEffect` hook to create a timer that increments the `count` state variable every second. We also use the `useEffect` hook to clean up the timer when the component is unmounted. **Rules of Hooks** There are three main rules to keep in mind when using hooks: 1. **Only use hooks at the top level**: Do not use hooks inside loops, conditionals, or nested functions. 2. **Only use hooks in React function components**: Do not use hooks in class components. 3. **Only use hooks in the same order**: Make sure to use hooks in the same order every time, even if the hook is not used in every render. **Exercise** Create a functional component that uses the `useState` hook to manage a todo list. The component should display a list of todos and allow the user to add new todos. **Additional Resources** * [React Hooks Documentation](https://reactjs.org/docs/hooks-intro.html) * [useState Hook Documentation](https://reactjs.org/docs/hooks-state.html) * [useEffect Hook Documentation](https://reactjs.org/docs/hooks-effect.html) **Leave a Comment** If you have any questions or need help with the exercise, leave a comment below. We will respond with feedback and guidance. Next Topic: **State management in React: Lifting state up and using context API** In the next topic, we will explore how to manage state in React by lifting state up to a parent component and using the context API. This topic will build on the concepts learned in this topic and provide a deeper understanding of state management in React.