React Hooks are functions used in a function component to hook into React's state object, lifecycle methods, and other React features without writing a class component.

The React useState Hook allows us to track state in a function component. Whenever you want to create variable, then you have to use useState() hook.

useState Hook

The State Hook (useState) allows a function component hook into React's state object.

Syntax

			
					import React, { useState } from "react";

const [ age, setAge ] = useState(19);

			
	

			
	
			

		
	

Returns

useState to return an array because they advocate using array destructuring to access a function component's state.

• The current state.
• A function that updates the state.

You can call useState() multiple times. React recommends splitting state into multiple state variables based on which values tend to change together.

Example : Simple Counter

			
					function Counter() {
   const [count, setCount] = useState(0);
   const increment = () => setCount(prevCount => prevCount + 1);

   return (
     <div>
       <p>Clicked: {count} times !!!</p>
       <button onClick={increment}>Increment</button>
     </div>
   );
}

			
	

			
	
			

		
	

Example : Array with Names

			
					function Names() {
 const [names, setNames] = useState(['tsr']);

 const addName = () {
   setNames((prev) => {
     return [...prev, 'CJ'];
   });
};

			
	

			
	
			

		
	

• ... spread Operator is used to maintain the previous state array
• Then Adding the new name to the end
• If we wanted to add the new name to the start we could have [name, ...prev]

Example : Working with Object

			
					function Person() {
  const [details, setDetails] = useState({
     name: 'CJ',
     email : 'contact@codejagd.com'
  });
    const handleChange = ({ }) => {
      setDetails((prev) => ({
        ...prev,
        'website' : 'codejagd.com'
      }));
};

			
	

			
	
			

		
	

• We have an object containing multiple details about me.
• We pass a name: value pair into our setDetails function that also uses …prev to change the state to the previous object with the new value pair appended to the object.