DEV Community

Cover image for React useEffect And What Is It?
Ahmed Radwan
Ahmed Radwan

Posted on

4

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

Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay