DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for React useEffect And What Is It?
Ahmed Radwan
Ahmed Radwan

Posted on

React useEffect And What Is It?

React Side Effect What is it with examples?

You may want to run some code after rendering without running that code in the render() method itself. The useEffect function runs after the JSX component return.

Examples:
All sort of codes will effect your app from outside: API, websockets, local storage and multiple states need to be in sync


When does React run useEffect? and when does NOT?

Runs the first time with the first render and for each other re-render of the component it must check first on the dependency array.


What is the dependency array?

This is an important part of the useEffect function, it's an array containing the dependencies, these dependencies will be the conditions that the useEffect function will only run when they change.


useEffect Example:

// import useEffect 
import { useEffect } from 'react';

 function MyComponent() { 
// We create the count state to include it in the useEffect 
   dependency array
   const [count, setCount] = React.useState(0); 

// Arguments: function and array 
// Count is one of dependencies 
   useEffect(() => {}, [count]); 
// will run useEffect when count has different value than 0

// JSX component return
 return ... }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs