React Hooks: useState

Learn how to use state in a functional component.

What are Hooks?

How to useState

// import the Hook
import React, { useState } from 'react';
// declare [current value, updated value] = use (initial value)const [state, setState] = useState(0);
const [active, setActive] = useState(false);
const [fruit, setFruit] = useState('');
const [form, setForm] = useState({
First: 'Bruce',
Last: 'Wayne',
Occupation: 'Philanthropist',
}]);

Build a simple counter

// import React hook to use
import React, { useState } from 'react';
// create a function component
function Counter() {
// declare a new state variable, which we'll call "count"
// the initial value of count is set to 0
const [count, setCount] = useState(0);
// render component
return (
<div>
{/* initial count value = 0 */}
<p>You clicked {count} times</p>

{/* Each button click will update and increment count by 1 */}
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Resources