If you’re new to React, like me, then you’ve probably come across enough component methods to make your head explode. Today, I would like to provide a more detailed explanation about one in particular: useEffect. I have seen useEffect in numerous tutorials and code samples, but for some reason, even after reading the React documentation, it never fully clicked what exactly this function did. Essentially, useEffect is a function that can take a function as a parameter, calling that function under certain conditions

Component Mounting

First, useEffect will take effect (sorry) after the component is mounted, or in other words, after the component is rendered for the first time. If you’re used to the previous React function componentDidMount, note that this is a slight deviation from the old functionality! While componentDidMount and useEffect run after the component ‘mounted’, useEffect takes place after the actual screen render takes place. This means a user will be able to see the useEffect changes take place in real time, while componentDidMount would have taken place before the user saw the changes.

The Dependency Array

Next, useEffect can execute when a component is updated, or rerendered. This can be specified in a number of different ways through an optional, second parameter known as the dependency array. If the dependency array is left blank, useEffect will execute everytime that the component is updated or rerendered! If you aren’t careful, this can cause an infinite loop of rerenders. For example, a component mounts, useEffect makes some API call to update state via useState(), updating the component. The component is updated by useState, rerendering the component. The component mounts once again, and useEffect is called once more, starting the loop over.

If variables are provided to the dependency array, it allows the component to only execute useEffect if those specific variables are updated. This also allows for numerous useEffect functions to be written, each with different functionalities for a different dependency array. This feature allows an easy, robust way to customize React components to handle each change to their separate variables differently.

Finally, if you’d prefer to avoid all the extra nonsense and simply run useEffect only when the component mounts, there is a way! Passing an empty array (note this is different than no argument at all) will cause the component to run useEffect only once: when it is initially mounted/rendered. That is because while there is an array that useEffect is constrained to, there are no variables in it! This feature allows a simple way to define a function on/after component instantiation.

While difficult at first, React’s flexibility makes it a top choice for many industry user’s tech stacks. Learning React is by no means easy, but I hope this explanation will prove useful to other beginners well on their way to becoming React experts.