Hello React Learners,
Today we will learn about React useEffect hook. This tutorial will cover, What are hooks in react? What is useEffect hook in React? And an example of useEffect React hooks.
So let’s discover React js useEffect Hook.
Contents
What are Hooks in React?
ReactJS hooks allow using additional react features like managing state and performing after effect. React hook function allows using react features without writing a class. ReactJS hooks are backward-compatible. In version 16.8, ReactJS hooks were added.
Rules of Hooks in React:
- Only call Hooks inside React function components.
- Only call Hooks at the top level of a component.
- Hooks must not be conditional.
So you got the idea about ReactJS hooks, now let us learn about React useEffect hook.
useEffect Hook in React
- You can perform side effects in your components with the help of useEffect hook.
- Side effects like fetching data, directly updating the DOM, and setting up timers can be performed using useEffect in react.
- Comparing with React class lifecycle methods, you can consider useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
useEffect hook React accepts two arguments. The second argument is optional.
|
1 |
useEffect(<function>, <dependency>) |
Firstly, you need to import useEffect hook in React
|
1 |
import {useEffect } from "react"; |
Runs on every render
|
1 2 |
useEffect(( ) => { }); |
Runs only on the first render
|
1 2 |
useEffect(( ) => { }, [ ]); |
Runs on the first render And any time any dependency value changes
|
1 2 |
useEffect(( ) => { }, [prop, state]); |
Effect Cleanup
- Some effects require cleanup to reduce data breach.
- Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed of.
- We do this by including a return function at the end of the useEffect Hook in React.
|
1 2 3 4 5 6 |
useEffect(( ) => { effect return ( ) => { cleanup } }, [input]) |
Example of React useEffect
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; function Counter() { const [count, setCount] = useState(0); const [calculation, setCalculation] = useState(0); useEffect(() => { setCalculation(() => count * 2); }, [count]); // <- add the count variable here return ( <> <p>Count: {count}</p> <button onClick={() => setCount((c) => c + 1)} >+</button> <p>Calculation: {calculation}</p> </> ); } |
Conclusion:
Hope you got the clear idea about React hooks useEffect. If you face any problem, you can ask me in the comment box or Hire a React Developer. Share the tutorial with your friends and stay in touch to learn more about ReactJS.
Happy Coding!
This post is a lifesaver for React newbies like me! The way it walks through the useEffect hook with a real example makes it click instantly. Thanks for breaking down the complexity and making it feel like a piece of cake. Now I’m all set to level up my React game!
Great post! Thanks for writing such a helpful and informative post about the useEffect hook in ReactJS. I’ve been working with this framework for a while now, but I still find some of the more advanced concepts to be a bit confusing. Your examples and explanations really cleared things up for me and helped me to better understand how and when to use useEffect. I especially appreciate that you included code snippets to illustrate your points – seeing the actual syntax in action makes it so much easier to grasp.