react usestate hook

1import React, { useState } from 'react';
2
3function Example() {
4  // Declare a new state variable, which we'll call "count"  
5  const [count, setCount] = useState(0);
6  
7  return (
8    <div>
9      <p>You clicked {count} times</p>
10      <button onClick={() => setCount(count + 1)}>
11        Click me
12      </button>
13    </div>
14  );
15}

1import React, { useState } from 'react';
2
3function Example() {
4  // Declare a new state variable, which we'll call "count"  
5  const [count, setCount] = useState(0);
6  return (
7    <div>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>
10        Click me
11      </button>
12    </div>
13  );
14}

1class Example extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      count: 0
6    };
7  }
8
9  render() {
10    return (
11      <div>
12        <p>You clicked {this.state.count} times</p>
13        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
14          Click me
15        </button>
16      </div>
17    );
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'));

1function Counter({initialCount}) {
2  const [count, setCount] = useState(initialCount);
3  return (
4    <>
5      Count: {count}
6      <button onClick={() => setCount(initialCount)}>Reset</button>
7      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
8      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
9    </>
10  );
11}

1 1:  import React, { useState } from 'react'; 2:
2 3:  function Example() {
3 4:    const [count, setCount] = useState(0); 5:
4 6:    return (
5 7:      <div>
6 8:        <p>You clicked {count} times</p>
7 9:        <button onClick={() => setCount(count + 1)}>10:         Click me
811:        </button>
912:      </div>
1013:    );
1114:  }