All React Hooks Explained in 2 Hours | Complete React Hooks Tutorial with Example 2024

Introduction

This tutorial provides a comprehensive overview of React Hooks, designed for beginners with basic knowledge of React JS. You will learn the definitions, uses, and examples of the most commonly used hooks in React, making you confident in integrating them into your projects.

Step 1: Understanding React Hooks

• React Hooks are functions that let you use state and other React features without writing a class.
• They allow functional components to manage state and lifecycle methods.
• Common hooks include useState, useEffect, useRef, and others.

Step 2: Using the useState Hook

• The useState hook lets you add state to your functional components.
• Example:

  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>
      );
  }
  

Step 3: Implementing the useEffect Hook

• The useEffect hook allows you to perform side effects in your components, such as data fetching or subscriptions.
• Example:

  import React, { useEffect, useState } from 'react';
  
  function DataFetcher() {
      const [data, setData] = useState([]);
  
      useEffect(() => {
          fetch("https://api.example.com/data")
              .then(response => response.json())
              .then(data => setData(data));
      }, []); // Empty array to run effect only once
  
      return <div>{JSON.stringify(data)}</div>;
  }
  

Step 4: Exploring the useRef Hook

• The useRef hook allows you to persist values between renders without causing re-renders.
• Example:

  import React, { useRef } from 'react';
  
  function FocusInput() {
      const inputRef = useRef(null);
  
      const focusInput = () => {
          inputRef.current.focus();
      };
  
      return (
          <div>
              <input ref={inputRef} type="text" />
              <button onClick={focusInput}>Focus Input</button>
          </div>
      );
  }
  

Step 5: Utilizing the useMemo Hook

• The useMemo hook optimizes performance by memoizing expensive calculations.
• Example:

  import React, { useMemo } from 'react';
  
  function ExpensiveComponent({ number }) {
      const factorial = useMemo(() => {
          function calcFactorial(n) {
              return n <= 0 ? 1 : n * calcFactorial(n - 1);
          }
          return calcFactorial(number);
      }, [number]);
  
      return <div>Factorial: {factorial}</div>;
  }
  

Step 6: Implementing the useCallback Hook

• The useCallback hook returns a memoized version of a callback function that only changes if one of the dependencies has changed.
• Example:

  import React, { useCallback, useState } from 'react';
  
  function ParentComponent() {
      const [count, setCount] = useState(0);
  
      const increment = useCallback(() => {
          setCount(c => c + 1);
      }, []);
  
      return <ChildComponent increment={increment} />;
  }
  

Step 7: Working with the useContext Hook

• The useContext hook allows you to access context values directly without needing a Consumer component.
• Example:

  import React, { useContext } from 'react';
  
  const MyContext = React.createContext();
  
  function Component() {
      const value = useContext(MyContext);
      return <div>{value}</div>;
  }
  

Step 8: Understanding the useReducer Hook

• The useReducer hook is an alternative to useState, suitable for managing complex state logic.
• Example:

  import React, { useReducer } from 'react';
  
  const initialState = { count: 0 };
  
  function reducer(state, action) {
      switch (action.type) {
          case 'increment':
              return { count: state.count + 1 };
          case 'decrement':
              return { count: state.count - 1 };
          default:
              throw new Error();
      }
  }
  
  function Counter() {
      const [state, dispatch] = useReducer(reducer, initialState);
  
      return (
          <>
              Count: {state.count}
              <button onClick={() => dispatch({ type: 'increment' })}>+</button>
              <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
          </>
      );
  }
  

Step 9: Using the useLayoutEffect Hook

• The useLayoutEffect hook is similar to useEffect, but it runs synchronously after all DOM mutations.
• Use this hook for reading layout from the DOM and synchronously re-rendering.

Step 10: Creating Custom Hooks

• Custom hooks allow you to extract component logic into reusable functions.
• Example:

  import { useState, useEffect } from 'react';
  
  function useFetch(url) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);
  
      useEffect(() => {
          fetch(url)
              .then(response => response.json())
              .then(data => {
                  setData(data);
                  setLoading(false);
              });
      }, [url]);
  
      return { data, loading };
  }
  

Conclusion

You have now learned the fundamental React Hooks, including their definitions and practical examples. By practicing these hooks, you can enhance your React applications and manage state and side effects more efficiently. Next, consider creating a small project that employs these hooks or explore building custom hooks to solve specific problems in your applications.