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}
1useEffect 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
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'));
1//This is a basic example, carefully read the docs as
2//useEffect it's like componentDidMount/WillUnmount
3function Example() {
4 const [count, setCount] = useState(0);
5
6 // Similar to componentDidMount and componentDidUpdate:
7 useEffect(() => {
8 // Update the document title using the browser API
9 document.title = `You clicked ${count} times`;
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}