React Hooks Fundamentals for Beginners

Hello everyone, I might be a little late but I'm still going to say "Happy New Year 🎉". I hope the year started on the right footing for us all. My recurring new year's resolution has always been that I should keep doing the things that make me happy and give me purpose. Writing and publishing articles that will help other developers happens to be one of those things. Today, let's talk a little bit about React Hooks and how they help us create better applications. Let's begin!!

What are hooks?

Hooks are simply javascript functions that give developers a means to "hook into" react state and lifecycle from functional components. So we can use hooks to isolate the reusable parts from a functional component. Hooks let you use state and other React features without writing a class. The first support for hooks came in React 16.8.0 released in February 2019.

Why the need for hooks?

At this point, you'd probably be wondering why the React developer team felt the need to add Hooks to the library. Hooks solve a wide variety of seemingly unconnected problems. Let us examine some of these problems below:

• Use of classes: This issue has more to do with javascript than with react itself. In working with classes, you have to understand how the this keyword works in JavaScript, which is very different from how it works in most languages. It is easier to understand concepts like props, uni-directional data flow and states but implementing class components is often a struggle for many developers. Classes make optimization difficult in that they don't minify well and also make hot reloading cracking and unreliable. Hooks solve this problem by letting you use more of React's features without classes.

• Stateful component logic: A stateful component declares and manages its local state while a stateless component is a pure function that doesn't have a local state and side effects to manage. There is no particular way to reuse stateful component logic in React and even though this can be solved using higher-order components and render props patterns which are advance React concepts, they result in making a code base inefficient as a developer has to wrap several components in other components to share the functionality. We can now isolate all the stateful logic(anything that needs to declare and manage a state variable locally.) in hooks and use them in components. Hooks let us share stateful logic in a much better and cleaner way without messing up the component hierarchy.

• Complex Scenarios: Hooks came to simplify complex scenarios such as data fetching and subscribing to events which more often than not results in related code not being organized in one place but scattered among different lifecycle methods. Take data fetching, for instance, it is an action that is usually performed in componentDidMount or componentDidUpdate, similarly, in case of event listeners, it is done in componentDidMount or componentWillUnmount. These develop a scenario where completely different codes like data fetching and event listeners end up in the same code block. This also makes it impossible to break components into smaller components because of stateful logic. This is one of the reasons many people prefer to combine React with a separate state management library which often introduces too much abstraction, makes reusing components more difficult and requires that jump between files back and forth. Hooks solves this issue of complex scenarios by letting you split one component into smaller functions based on what pieces are related rather than forcing a split based on life cycle methods.

Built-in React Hooks

React ships with a bunch of in-built hooks. I will cover some of these hooks in detail in another article. These in-built hooks are:

useState: To manage states. Returns a stateful value and an updater function to update it. It allows functional components to have a dedicated state of their own.

useEffect: To manage side-effects like API calls, subscriptions, timers, mutations, and more. It allows functional components to manipulate DOM elements before each render.

• useContext: To return the current value for a context.

• useReducer: A useState alternative to help with complex state management.

• useCallback: It returns a memorized version of a callback to help a child component not re-render unnecessarily.

• useMemo: It returns a memoized value that helps in performance optimizations.

• useRef: It returns a ref object with a .current property. The ref object is mutable. It is mainly used to access a child component imperatively.

• useLayoutEffect: It fires at the end of all DOM mutations. It's best to use useEffect as much as possible over this one as the useLayoutEffect fires synchronously.

• useDebugValue: Helps to display a label in React DevTools for custom hooks.

Another beautiful thing about Hooks is that we have the privilege to create our hooks for our unique use cases. So don't get scared when you are asked to write a custom hook for it is just another JS function to deal with side effects and states outside of functional components.

Outro

Learning new things is not usually easy most of the time and you might feel that way with learning about React hooks so I hope this article helps you in your learning journey. For now, it's Goodbye! Stay blessed and keep doing what makes you feel alive.