What are React Hooks? : Hooks has been added in ReactJs’s Version 16.8, Main purpose of hooks was to use React features without writing class. Hooks lets you “hook into” react features like we use state hook to set state in react components Hooks are backend-compatible.
When we write function component here you can add some state according to your need, previously you had to convert it to a class. React Hooks gives the abilityto use them inside existing function component. Lets learn more on reactjs hooks.
We will discuss two main Hooks that are basic and used mostly or you can say that they are the heart of react.
React Hooks List | Hooks in React
- State Hook (useState)
- Effect Hook (useEffect)
- Custom Hooks (Depends On your need)
Rules of Hooks || React Hooks Lifecycle
- Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
State Hook (useState) : State hook is used to set a state and that state can be accessed in child component as well as in parent component. We can set a state as Boolean, Array, Null values types. Lets have an example from react official website.
In above example we have declared count variable in function component as
Right now count is set to zero value we can check it with printing the count state value in console like this
And on button click event we are adding +1 to count state.. each time you click one button it will increase the value by 1.
Effect Hook (useEffect) : React Effect Hook provide us the ability to preform side effects in function component. Same example we are using in the effect hook that we used in the State Hook. useEffect hook tells the react that your component need to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
By default useEffect Hook run’s after every render, it runs both after the first render and after every update. .
Basically in this example whenever we hit the button it will update the title and will show how many time we have clicked the button by using useEffect Hook function.
React Hooks Interview Questions
React Hooks Lifecycle