The main use case for the useEffect hook is to perform side effects in function components. Side effects could be data fetching, subscriptions, or manually changing the DOM.
The effect’s logic interacts with the component by running after every render, including the first render. It allows you to synchronize things outside of the React tree according to our props and state.
The return value from the effect’s logic function is a cleanup function. This function will be called when the component unmounts and before re-running the effect due to subsequent re-renders. It’s used to clean up any subscriptions, timers, or other side effects set up in the useEffect call.
Keep these pages handy - they answer questions that show up regularly for this lab.
This page provides a guide on how to handle events with JavaScript in a React application, which is similar to handling events on DOM elements. For example, in React, to specify a click event, you can use
onClick.
Conditional Rendering in React works the same way conditions work in JavaScript. It allows you to create distinct components that encapsulate behavior you need, then you can render only some of them, depending on the state of your application.
This page deals with how to update arrays in the state. For instance, you can use the
spreadoperator to add an item to an array:setArray(prevArray => [...prevArray, newItem]).
This page talks about how to update objects in the state. For example, to update a property in an object you can use the following code:
setObject(prevObject => ({...prevObject, propToChange: newValue})).