JAVASCRIPT

useeffect hook react

import React, { useState, useEffect } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  const color = count % 5 === 0 ? 'red' : 'blue'

  useEffect(() => {
    document.body.style.backgroundColor = color
  }, [color])

  return (
    <button
      onClick={() => {
        setCount(count + 1)
      }}
    >
      Click HERE to increment: {count}
    </button>
  )
}

useeffect react example

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

function Reddit() {
  // Initialize state to hold the posts
  const [posts, setPosts] = useState([]);

  // effect functions can't be async, so declare the
  // async function inside the effect, then call it
  useEffect(() => {
    async function fetchData() {
      // Call fetch as usual
      const res = await fetch(
        "https://www.reddit.com/r/reactjs.json"
      );

      // Pull out the data as usual
      const json = await res.json();

      // Save the posts into state
      // (look at the Network tab to see why the path is like this)
      setPosts(json.data.children.map(c => c.data));
    }

    fetchData();
  }); // <-- we didn't pass a value. what do you think will happen?

  // Render as usual
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

ReactDOM.render(
  <Reddit />,
  document.querySelector("#root")
);

useeffect

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {    document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

react useEffect

import React, { useEffect } from 'react';

export const App: React.FC = () => {
  
  useEffect(() => {
        
  }, [/*Here can enter some value to call again the content inside useEffect*/])
  
  return (
    <div>Use Effect!</div>
  );
}

how to use useeffect

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:  
  useEffect(() => {    
  	// Update the document title using the browser API    
  	document.title = `You clicked ${count} times`;  
  });
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect : react

import { useState, useEffect } from 'react';

function App() {

  const [pieceOfState, setPieceOfState] = useState(0);

  useEffect(() => {
    console.log('I'm in useEffect!');
    console.log('This will be called whenever an instance of this component mounts');
    console.log('or whenever pieceOfState is updated');
  }, [pieceOfState]);

  return (
    <div>
      <button onClick={() => setPieceOfState(pieceOfState + 1)}>Click Me to Update pieceOfState!</button>
    </div>
  );
}

useEffect hook

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);


  // ✅ hook is called at top level (not conditionally)
  useEffect(() => {
    if (counter > 0) {
      console.log('hello world');
    }
  });

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

useEffect

useEffect(()=>{
  // It will run everytime  
})

// onMount 
useEffect(()=>{
  // It will run only one time  
},[]) 

// component didUpdate
useEffect(()=>{
  // it will run when dependency array change   
},[data])

// component willUnmount
useEffect(()=>{
  // for cleaning up the code
  return(()=>{
  })
})

useeffect

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );

useeffect

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

useeffect react

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:  
  useEffect(() => {    
  	// Update the document title using the browser API    
  	document.title = `You clicked ${count} times`;  
  });
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Source:reactjs.org
3
React useEffect, useState

what does useeffect do

If you’re familiar with React class lifecycle methods, 
you can think of useEffect Hook as componentDidMount, 
componentDidUpdate, and componentWillUnmount combined.

what is useeffect

useEffect is a hook for encapsulating code that has 'side effects,' and is like a combination of componentDidMount , componentDidUpdate , and componentWillUnmount . Previously, functional components didn't have access to the component life cycle, but with useEffect you can tap into it.23.1.2019

React useEffect Hook

import React, { useState, useEffect } from "react";

const App = () => {
  const [color, setColor] = useState("black");

  useEffect(() => {
    const changeColorOnClick = () => {
      if (color === "black") {
        setColor("red");
      } else {
        setColor("black");
      }
    };
    
    document.addEventListener("click", changeColorOnClick);

    return () => {
      document.removeEventListener("click", changeColorOnClick);
    };
  }, [color]);

  return (
    <div>
      <div
        id="myDiv"
        style={{
          color: "white",
          width: "100px",
          height: "100px",
          position: "absolute",
          left: "50%",
          top: "50%",
          backgroundColor: color,
        }}
      >
        This div can change color. Click on me!
      </div>
    </div>
  );
};

export default App;

useEffect

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  // Similar to componentDidMount and componentDidUpdate:  
  useEffect(() => {    
    // Update the document title using the browser API    
    document.title = `You clicked ${count} times`;  
  });
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

react hook useeffect

//This is a basic example, carefully read the docs as
//useEffect it's like componentDidMount/WillUnmount
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React useEffect Hooks

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

useEffect

  useEffect(() => {
  	/*Inside*/
  });

how to use React useEffect Hook

most common cases how useEffect implementation: 
- fetch data from API, 
- directly updating the DOM, 
- use timers and real-time data displays (such as BTC current price)
- validating input field
- trigger animation on new array value
- 

// 1- EVERY RERENDER
useEffect( () => {
  console.log("It runs everytime this component rerenders")
  });

// 2- ON MOUNT
useEffect( () => {
   console.log("It Only runs once (When the component gets mounted)")
   }, []);

// 3- DEPENDING ON CONDITION
useEffect( () => {
   console.log("It runs everytime the condition is changed")
   }, [condition]); //basically the dependency array determines when the rerender happens

// 4- DEPENDING ON CONDITION, BUT WITH "clean up"
useEffect( () => {
	console.log("It runs everytime my condition is changed")
	return () => {
    	console.log("Use this return as a 'clean up tool' (it runs before the actual code)")
        }
    }, [condition]);

useeffect react

useEffect is a hook for encapsulating code that has 'side effects,' and is like a combination of componentDidMount , componentDidUpdate , and componentWillUnmount . Previously, functional components didn't have access to the component life cycle, but with useEffect you can tap into it.23.1.2019

useEffect

The useEffect Hook allows you to perform side effects in your components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments. The second argument is optional.
useEffect(<function>, <dependency>)

useEffect

  useEffect(() => {
    alert('Requested data from server...');
    get(forecastType).then((response) => {
      setData(response.data);
    });
  }, [forecastType]);

useEffect react

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

when to use useEffect

What does useEffect do? By using this Hook, you tell React that 
your component needs to do something after render. 
React will remember the function you passed (we’ll refer to it 
as our “effect”), and call it later after performing the DOM updates.

useEffect

//1.

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  });
}

//2.

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  }, []);
}

//3. 

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  }, [isOn]);
}
The first will run the effect on mount and whenever the state changes. The clean up will be called on state change and on unmount.

The second will only run the effect once on mount and the clean up will only get called on unmount.

The last will run the effect on mount and whenever the isOn state changes. The clean up will be called when isOn changes and on unmount.

In your examples, the first and last examples will behave the same because the only state that will change is isOn. If the first example had more state, that effect would also refire if the other state were to change.

I guess I should also add is that the order of things would be like: mount: -> run effect, state change: run clean up -> run effect, unmount -> run clean up.

react hooks useeffect

jsximport { useEffect, useState } from 'react';function MyComponent({ prop }) {  const [state, setState] = useState('');  useEffect(() => {    // Runs ONCE after initial rendering    // and after every rendering ONLY IF `prop` or `state` changes  }, [prop, state]);}

useEffect

//useEffect
//the whole purpose of useEffect is to: 
//observe state
//observe initial state when the array is empty
//Target specific State variable and do something every time changes

useeffect

useEffect(() => {
    // Update the document title using the browser API
   
  }, []);