React hooks are simple javascript functions that help us manage the component lifecycle and state. Hooks are similar to JavaScript functions but you need to follow these two rules. These rules are

1. Only call hooks at the top level: Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component renders.

2. Only call Hooks from React functions: You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called custom Hooks. In this blog, I'll talk about three hooks useState, useEffect, and useLayoutEffect. The useState is a simple function that returns a stateful value and a function for updating it, also we pass an initial value of the state as a parameter. A simple example of this hook.

import React, { useState,} from 'react';  

const App=()=> {  
  const [count, setCount] = useState(0);  

  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}

useEffect and useLayoutEffect are the hooks that manage side-effects in functional React components. A React side-effect occurs when we use something that is outside the scope of React.js in our React components e.g. the Browser APIs like localStorage. The useEffect is an asynchronous function which accept two arguments a callback function and an dependency array. The callback is the function containing the side-effect logic. callback is executed right after changes were pushed to DOM. dependency is an optional array of dependencies. useEffect executes a callback only if the dependencies have changed between renderings. A simple example about useEffect.

import { useEffect, useState } from 'react';

cont = App()=> {
   const [counter, setCounter]=useState("");
  useEffect(() => {
    console.log(state changed);
  }, [counter]);
  return <button onClick={()=>{setCounter(prev=>prev+1)}}>Click</button>       
}
// use effect run after every click to button

The last hook of this blog is useElayoutEffect. UseLayoutEffect is the same as useEffect but there are two maintain the difference between them. UseEffectruns synchronously immediately after React has performed all DOM mutations. This can be useful if you need to make DOM measurements (like getting the scroll position or other styles for an element) and then make DOM mutations or trigger a synchronous re-render by updating the state. Simple example :

import { useLayoutEffect} from 'react';

function Greet({ name }) {
  const message = `Hello, ${name}!`;   // Calculates output
  useLayoutEffect(() => {
    // Good!
    document.title = `Greetings to ${name}`; // Side-effect!
  }, [name]);
  return <div>{message}</div>;         // Calculates output
}