React Hooks 101

Introduction:

In your React applications, do you find dealing with complicated class components to be a hassle? Have you been looking for a more efficient method of controlling state and logic in your functional components? React Hooks are the solution!

React Hooks, which were introduced in React 16.8, offer a powerful and flexible approach to access state and other React capabilities in functional components. They are made to make writing and maintaining high-quality React apps easier by streamlining and simplifying the development process.

With React Hooks, you can improve code readability and reduce the amount of boilerplate code needed for certain tasks. The best thing, though? State and other React features could only be used in class components using lifecycle methods like componentDidMount before the introduction of React Hooks. But with React Hooks, you can use state and other features directly in your functional components, without the need to convert them to class components.

It's not surprising that React Hooks are becoming more and more popular in the React community. So, if you're ready to level up your React skills and build modern and efficient React applications, read on to learn more about React Hooks and how they can benefit your development process.

What are React Hooks?

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. With React Hooks, we can extract and manage stateful logic or handle side effects within functional components.

Function-based components with React Hooks offer several advantages over class-based components. They provide a simpler and more intuitive syntax. Hooks eliminate the need for class declarations and the associated boilerplate code, making the component code cleaner and more concise. With Hooks, you can manage state and utilize lifecycle functionalities directly within the functional component itself. Hooks allow us to share stateful logic across different components. This promotes code reusability and makes it easier to maintain the codebase.

Here's an example showing the advantage of hooks with functional components over class-based components:

Class-based component:

 import React, { Component } from 'react';

 class Counter extends Component {
   constructor(props) {
     super(props);
     this.state = { count: 0 };
   }
   increment = () => {
     this.setState({ count: this.state.count + 1 });
   };
   render() {
     return (
       <div>
         <p>Count: {this.state.count}</p>
         <button onClick={this.increment}>Increment</button>
       </div>
     );
   }
 }

Functional component with Hooks:

 import React, { useState } from 'react';

 const Counter = () => {
   const [count, setCount] = useState(0);
   const increment = () => {
     setCount(count + 1);
   };
   return (
     <div>
       <p>Count: {count}</p>
       <button onClick={increment}>Increment</button>
     </div>
   );
 };

The first one, the class-based component achieves the same functionality, but it introduces more boilerplate code compared to the functional component with the useState hook. The code was lengthier, and managing the state required additional methods and lifecycle hooks in the class-based component. The useState hook simplified this process by managing state directly within functional components and reducing the complexity and making the code more concise and readable.

Basic Hooks: An Overview

Here are a few basic react hooks:

useState: It is used to declare and manage states. Returns a stateful value and an updater function to update it.
useEffect: It is commonly used to handle side effects. Side effects refer to actions that happen in a component's lifecycle, such as data fetching, subscriptions, or manipulating the DOM.
useContext: It helps in accessing and utilizing context values within functional components. By invoking useContext, you can tap into the current value for a specific context, empowering your components with the data they need without the hassle of prop drilling. You can refer to this blog of mine to learn more about Context API and Prop drilling (https://sirsimonsblog.hashnode.dev/the-battle-of-prop-drilling-vs-context-api-choosing-the-right-option-for-your-react-app).
useReducer: A useState alternative to help with complex state management. It offers a more structured approach to state management and can help streamline complex state updates.
useCallback: It returns a memorized version of a callback to help a child component not re-render unnecessarily.
useRef: By utilizing useRef, you can obtain a ref object with a .current property, providing mutable access to child components.
useMemo: It returns a memoized value that helps in performance optimizations.

You can learn more about these hooks here: https://react.dev/reference/react.

Conclusion:

React Hooks have truly brought a revolution in React developers' world. By providing a simpler, more intuitive way to handle state, side-effects, and reusable logic within functional components, hooks have empowered developers to write cleaner, more concise code. As we continue on our React journey, embracing hooks will undoubtedly lead to more efficient and enjoyable development experiences. So, let's embrace the power of React Hooks and take our applications to new heights of excellence.

Thank you for reading!

React Hooks 101: The Basics and Benefits

Table of contents

Introduction:

What are React Hooks?

Basic Hooks: An Overview

Conclusion: