Hooks in React

What is a Hook?

Hooks are the functions that let you work with the state and lifecycle components of React by using function components. Hooks is a concept which allows us to use React inside a function, we don’t need to define classes for it.

Introduction to Hooks

It’s always stressful to reuse a stateful logic between components. Can use state and other React without defining a class. Also without changing the hierarchy of the component we can reuse the stateful logic.

We often have to take care of components that begin simply but grow into an unmanageable stateful logic and side effects. Each lifecycle method may contain a mixture of unrelated logic. For instance, a component might perform API calling to fetch some data which can be done in the lifecycle method componentDidMount and componentDidUpdate.

An equivalent componentDidMount method can additionally have some unrelated logic that calls event listeners, Mutually related code that changes or works together gets split into different parts, but completely unrelated code finishes up combined during a single method. This might lead to inconsistency or even introduce bugs.

To overcome this, using Hooks we can separate one component into smaller functions supporting what pieces are related rather than forcing a split supported lifecycle method.

Read more: https://tudip.com/blog-post/hooks-in-react/