What are React Hooks - An Introduction to React Hooks

Fundamentals of React Hooks

In my previous blog about React Components we discussed that Components are plain old JavaScript functions. The speciality of JS functions is that in a function we can compose many other functions in it. Similarly, in the case of components we can compose many different components in it. An illustration for it is given below

Now before we go forward there are some terminologies that we need to bear in mind.

• Stateless components: Those components are the same as pure functions(pure functions are those which always output the same kind of data for the same kind of output). This means that they do not have any state and always render the same thing.

• Stateful Components: Those components which have a state and keep a log of changing data.

In React, components tend to be in a Stateless manner as much as possible which means if you are building a real-world project the function should always render the same thing but that is simply not possible because we need to make changes in those functions such as API calls and many other such things to achieve our purpose. So change in state will always occur but at the same time, we need to keep the components Stateless as much as possible.

To solve our miseries comes in "Hooks".

With the help of Hooks, we can extract the function that is resulting in the change of state and put it in some other function such that our component is Stateless but also these hooks are reusable which is our aim.

Here is an illustration:

useState

useState is a standard hook provided by React to declare and track the state variable value of the component.

Here is the syntax of useState

const[state,setState]=useState(initialValue)

• useState: A built-in React hook to declare and manage a state variable

• initialValue: useState accepts an optional argument. It can be a valid JS value to set the initial value of the state variable

• state: a variable that stores the current value of the state variable. It is returned by the useState hook.

• setState: a method to update the value of state variable. It is returned by the useState hook.

It is to be kept in mind that we cannot mutate the value of State directly, it has to be updated with the help of setState method. But why is that the case?

This is because React uses Virtual DOM and not the original DOM and if we change the value of the state directly it will be difficult to track what changes were made at what point in time in the future. To re-render a component the state must have a reference for comparison. So, if we keep on changing the value of the state then it will be difficult to have a reference and comparison which would prevent the state from re-rendering. Hence we should ALWAYS CHANGE THE VALUE OF STATE USING setState method.

This was it for this blog, we will continue with hooks in our next blog as well.

**All the concepts and examples were an extraction from Tapas Adhikari's React playlist.**