Exploring React’s useEffect Hook

everything you need to know about useEffect in reactJS

While learning reactjs, you have often heard about useEffect hook. In this article, I will discuss everything you need to know about useEffect and dependency array.

UseEffect Hook ReactJs

Why do we use useEffect?

We use useEffect hook in functional components to perform side effects. Data retrieval, DOM manipulation, and subscribing to external services are examples of side effects. These side effects are managed declaratively with the useEffect hook, which also makes sure they occur at the appropriate moment throughout the component’s lifespan.

Basic Syntax:

useEffect(() => {
}, [dependencies]);

The useEffect hook takes a function and an optional dependency array as arguments.

Dependency array:

In useEffect hook dependency array is used to determine when the effect should run. We have the following three common cases for dependency array in useEffect.

Empty Dependency Array:

In the case of an empty dependency array ([]), useEffect runs only once after the initial render. This is useful for running setup or cleanup code that doesn't depend on any state or props changes.

useEffect(() => {
  console.log('useEffect with empty array');
  return () => {
  };
}, []);

State Variables:

When we define a dependency array based on one or more state variables the effect runs when those state variables change. This is helpful for handling side effects that depend on the state of your component.

const [increment, setIncrement] = useState(0);
useEffect(() => {
  console.log(`Value changed to ${increment}`);
}, [count]);

No Dependency Array:

In case of no dependency array at all, the useEffect will run after every render of the component.

useEffect(() => {
  console.log('Effect runs after every render');
});

Common Use Cases

useEffect is versatile and can be applied to various scenarios in React development. Here are some common use cases:

Data Fetching

useEffect(() => {
  fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((data) => {
      setData(data);
    });
}, [dependencies]);

DOM Manipulation

useEffect(() => {
  const element = document.getElementById('example');
  element.textContent = 'Updated Content';
}, [dependencies]);

Subscribing to External Services

useEffect(() => {
  const subscription = subscribeToService();
  return () => {
    subscription.unsubscribe();
  };
}, [dependencies]);

Conclusion

In this article, we’ve explored the ins and outs of the useEffect hook in React. Remember to use it wisely to create responsive and performant applications. Whether you're fetching data, manipulating the DOM, or subscribing to external services, useEffect is a powerful tool that ensures your components behave predictably and reliably.