Hooks are functions that let you “hook into” React state and lifecycle features from function components.Hooks let you use state and other React features without writing a class. Hooks are simple JavaScript functions that help you with State management of the Functional components. and to mention here hooks only work with the functional components and not the class-based components.
"Hooks let you use more of React’s features without classes."
let us discuss some common hooks :-
1. useState
We call useState inside a function component to add some local state to it. React will preserve this state between re-renders.
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
}
while count here being the state value which is updated by the using the setCount function
To read more about useState read my blog on useState
2. useEffect
useEffect allows you to say "do a render of this component first so the user can see something then as soon as the render is done, then do something we want to run some additional code after React has updated the DOM. Network requests, manual DOM mutations, and logging are common examples of effects some syntax of useffect is
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
},[count]);
}
in this function it runs always when the value of the count is updated after the render is done