Introduction

React hooks are newly introduced as a means to reduce code and as a means of reducing the use of classes in react. Hooks are introduced to the version 16.8.0, so here we will be considering pros and cons of React hooks.

What is React Hooks and why?

Hooks are functions that let you hook into React state and lifecycle features from function components, React hooks are introduced in the latest version of react as a means to replace classes in react, but we can still use classes and hooks are used to reduce the complexity of the use of classes

What is wrong with classes you may ask. Well, classes invite unintentional patterns to slower the code.

3 types of hooks

  • State hooks
  • Effect hooks
  • Custom hooks

And for the question why?

Hooks allow us to reuse stateful logic without changing your component hierarchy and it let you use most react features without classes.

Hooks doesn’t affect the current code, we can use them side by side without affecting the existing code.

Hooks are easy to test and maintain

Easy to use and write and co-locate

Each hook has an isolated state which makes it possible to use it multiple times in a single component.

Disadvantages of using hooks

Mainly because of the long usage of classes and hooks are new I take time to get use to hooks. And if the user who uses the hooks with less understanding can use hooks for the wrong implementation.

State Hooks

Def: state hooks are used to minimize the work done using a class to update a state of an object in React.

READ  Integrate Bootstrap Template to an Angular Application

Use: state hooks can be used to set state set count and so on.

Effect Hooks

Def: Instead of using classes to fetch data, subscriptions and changing the DOM, we can use effect hooks.

Def: Effect hook is an API combining componentDidMount, componentDidUpdate, componentWillUnmount altogether.

Other hooks such as useContext, useReducer is using “use” In the naming convention of hooks to provide bug finding capabilities in the code using hooks.

You can write custom hooks that cover a wide range of use cases like form handling, animations, declarative subscriptions, timers, and probably many more we haven’t considered.

Rules of using hooks

  1. Use hooks at the top level
  2. Don’t use hooks inside loops, conditions or nested functions
  3. Only call hooks from React function components

Conclusion

In conclusion, react hooks are new to react as it is just being released to the newest update, so I think it has a potential in the future to replace the classes from react entirely. But since it is new and all I think to study the use cases and the usage of the hooks can be very valuable to a programmer as it is the future of react and it will ease up so many coding hours.

Sources