usestate in react

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}

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}

1import React, { useState } from 'react';
2
3function Example() {
4	
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}

1  const [x, setx] = useState(0);

1The initial value will be assigned only on the initial render (if it’s a function, it will be executed only on the initial render).