The useEffect Hook
It is important to understand mastering the useEffect hook if performing side effects within your React components. Side effects include an act of reaching outside of the component to perform a task and can cause issues and unpredictable results when these side effects reach outside of the components output zone. React components are intended to be pure functions and were meant to be reliable and easy to test with the output a predictable result based on the inputs. These inputs such as props and state make calculations that target the output value. Side effects, on the other hand, perform calculations outside of the target output value and therefore need useEffect to produce the desired output.
Note: Effects run after every render cycle.
UseEffect accepts callback and dependencies as arguments. Side effect logic is contained in callback and dependencies is an optional array of dependencies. UseEffect executes callback right after DOM update and executes it only if dependencies have changed between renderings. This invokes the callback after the initial render, and on later renderings involving the values of dependencies being changed. When a side effect is performed directly in the component’s body, it gets in the way of the React component rendering. Side effects were meant to be separate from the rendering process. UseEffect determines these side effects to be performed after the component renders. The dependencies control when you want the side effect to run. If dependencies are not provided, the side effect runs after every rendering, but placing an empty array as a dependency causes the side effect to run once after the initial rendering. This can be important when fetching data, as not providing an empty array as a dependency can cause an infinite loop. Mastering useEffect is important to avoid pitfalls like the infinite loop and is important in understanding React.
Note: Side Effects include
- fetch requests to an API for data
- interactions with browser APIs
- use of unpredictable timing functions such as setTimeout
The useEffect hook is tasked with managing side effects in functional components. The callback argument is a function containing the side effect logic. Dependencies is a list of your side effect’s dependencies. UseEffect blocks of code are your code’s indicators of asynchronous tasks and is a way of writing asynchronous code without blocking the UI. In the flow the component will be re-rendered based on a state, prop or context change and if one or more useEffect declarations are within the component, React will check each useEffect to determine whether the conditions are fulfilled to perform the implementation.
Get Josh Fowler’s stories in your inbox
Join Medium for free to get updates from this writer.
Finally, to perform side effects properly the effect cleanup function is necessary. In cases where a side effect needs to be shut off, a cleanup function can be used to successfully terminate the action. In order to use the cleanup function, returning a function from within the useEffect function is needed. The cleanup is performed within the function to shut off the desired process. This cleanup is called when the component is unmounted, runs, and assists in removing errors.
References:
