React Hooks - The best way to Learn it

React is a popular JavaScript library used to build web applications. Hooks were introduced in React 16.8 as a way to use stateful logic without writing a class component. They allow us to use state and other React features without writing a class. In this article, we will cover everything you need to know about React Hooks.

What are React Hooks?

Hooks are a new addition in React 16.8. Hooks are functions that let you hook into React state and lifecycle features from function components. They allow you to use state and other React features in function components.

Why React Hooks?

React Hooks provide a simpler and more intuitive way to work with state and lifecycle events in React components. Before React Hooks, you could only use state and lifecycle events in class components. But now you can use state and lifecycle events in functional components.

Basic Hooks in React

1. useState():

useState is a hook that allows us to add React state to our functional components. It's a function that takes a single argument, which is the initial state, and returns an array with two elements: the current state and a function to update the state.

Here's how to use the useState hook:

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

1. useEffect():

useEffect is another hook that lets us run side-effects in functional components. You might use it to fetch data, add event listeners, or perform other side-effects. useEffect takes two arguments: a function to run, and an array that contains the values that the effect depends on.

Here's how to use the useEffect hook:

import React, { useState, useEffect } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = `You clicked ${count} times`
  }, [count])

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

1. useContext():

useContext is a hook that allows us to consume a context within a functional component. Context is a way to pass data down the component tree without having to pass props manually at every level.

Here's how to use the useContext hook:

import React, { useContext } from 'react';

const UserContext = React.createContext();

function App() {
  const user = { name: 'John' };
  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

Custom Hooks in React

Custom hooks are a way to abstract reusable logic into a custom function. We can create our own hooks by using the basic hooks provided by React.

Here's how to create a custom hook:

import { useState, useEffect } from 'react';

function useCounter(initialCount) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const increment = () => setCount(count + 1);
  const reset = () => setCount(initialCount);

  return { count, increment, reset };
}

function Counter() {
  const { count, increment, reset } = useCounter(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Conclusion

React Hooks provide a simple and intuitive way to work with state and lifecycle events in React components. They allow you to reuse stateful logic between components and make it easier to write and test components. In this article, we covered the basic hooks (useState, useEffect, and useContext) and how to create custom hooks in React. I hope this article gives you a solid understanding of React Hooks and how to implement them in your React projects. Please you can support me by Buying me a coffee