react useeffect

1// Every rerender
2useEffect(() => {
3	console.log("I run everytime this component rerenders")
4});
5
6// onMount
7useEffect(() => {
8	console.log("I Only run once (When the component gets mounted)")
9}, []);
10
11// Condition based 
12useEffect(() => {
13	console.log("I run everytime my condition is changed")
14}, [condition]);
15
16// Condition based with "clean up"
17useEffect(() => {
18	console.log("I run everytime my condition is changed")
19	
20	return () => {
21    	console.log("Use this return as a 'clean up tool' (this runs before the actual code)")
22    }
23}, [condition]);

1function App() {
2  const [count, setCount] = useState(0);
3
4  useEffect(() => {
5    longResolve().then(() => {
6      alert(count);
7    });
8  }, []);
9
10  return (
11    <div>
12      <button
13        onClick={() => {
14          setCount(count + 1);
15        }}
16      >
17        Count: {count}
18      </button>
19    </div>
20  );
21}

1useEffect(() => {
2	//  code goes here
3    return () => {
4      // cleanup code codes here
5    };
6  },[]);

1import React, { useState, useEffect } from 'react';
2function Example() {
3  const [count, setCount] = useState(0);
4
5  // Similar to componentDidMount and componentDidUpdate:  
6  useEffect(() => {    
7  	// Update the document title using the browser API    
8  	document.title = `You clicked ${count} times`;  
9  });
10  
11  return (
12    <div>
13      <p>You clicked {count} times</p>
14      <button onClick={() => setCount(count + 1)}>
15        Click me
16      </button>
17    </div>
18  );
19}

1import React, { useEffect, useState } from 'react';
2import ReactDOM from 'react-dom';
3
4function LifecycleDemo() {
5  // It takes a function
6  useEffect(() => {
7    // This gets called after every render, by default
8    // (the first one, and every one after that)
9    console.log('render!');
10
11    // If you want to implement componentWillUnmount,
12    // return a function from here, and React will call
13    // it prior to unmounting.
14    return () => console.log('unmounting...');
15  }, [ // dependencies to watch = leave blank to run once or you will get a stack overflow  ]);
16
17  return "I'm a lifecycle demo";
18}
19
20function App() {
21  // Set up a piece of state, just so that we have
22  // a way to trigger a re-render.
23  const [random, setRandom] = useState(Math.random());
24
25  // Set up another piece of state to keep track of
26  // whether the LifecycleDemo is shown or hidden
27  const [mounted, setMounted] = useState(true);
28
29  // This function will change the random number,
30  // and trigger a re-render (in the console,
31  // you'll see a "render!" from LifecycleDemo)
32  const reRender = () => setRandom(Math.random());
33
34  // This function will unmount and re-mount the
35  // LifecycleDemo, so you can see its cleanup function
36  // being called.
37  const toggle = () => setMounted(!mounted);
38
39  return (
40    <>
41      <button onClick={reRender}>Re-render</button>
42      <button onClick={toggle}>Show/Hide LifecycleDemo</button>
43      {mounted && <LifecycleDemo/>}
44    </>
45  );
46}
47
48ReactDOM.render(<App/>, document.querySelector('#root'));

1import React, { useEffect } from 'react';
2
3export const App: React.FC = () => {
4  
5  useEffect(() => {
6        
7  }, [/*Here can enter some value to call again the content inside useEffect*/])
8  
9  return (
10    <div>Use Effect!</div>
11  );
12}