React Hook is a simple JavaScript function that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side effects.

Key concepts to remember

• useState Hook: The useState hook adds state functionality to components. It allows us to declare and manage state variables within a component. By calling the useState hook, we can initialize a state variable and its corresponding setter function. Updating the state variable triggers a re-render of the component, reflecting the new state value.
• useRef Hook: The useRef hook creates mutable variables that persist across component renders. Unlike useState, changes to useRef variables do not trigger a re-render. useRef access or store references to DOM elements, manage previous values, or preserve values between renders.
• useEffect Hook: The useEffect hook enables us to perform side effects in functional components. It allows us to handle tasks like data fetching, subscriptions, or interacting with the DOM. By specifying dependencies, we control when the effect runs, optimizing performance and preventing unnecessary re-renders.
• useMemo Hook: The useMemo hook enables the memoization of expensive calculations or computations. It takes a function and a dependencies array and returns a memoized value. The memoized value is only recomputed by providing a dependencies array when the dependencies change. This optimization significantly improves performance by avoiding unnecessary recalculations.

Example

Let's create the component Counter to showcase how the useState hook is used for managing state and how the useEffect hook can be utilized to handle side effects and perform cleanup operations.

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Effect triggered!");
  }, [count]);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default Counter;

Code explanation:

• Line 1: We import the necessary dependencies from the React library. Specifically, we import the React object, the useState, and useEffect hooks.
• Line 3: The code defines a React functional component named Counter.
• Line 4: We use the useState hook to declare a state variable called count and its corresponding setter function setCount. The initial value of count is set to 0.
• Line 6-8: We utilize the useEffect hook to define a side effect. The effect function logs "Effect triggered!" to the console and will be triggered after every component render. The effect function has a dependency array [count], which means it will only run when the count value changes.
• Line 10-12: We declare an incrementCount function to update the count state. It utilizes the setCount setter function provided by the useState hook. The function receives the previous prevCount value and returns the updated count by incrementing it by 1.
• Line 14-19: Return HTML elements. Mainly, h1 displays the current value of the count state variable. button has onClick event handler that triggers the incrementCount function when clicked.
• Line 22: The Counter component is exported as the default export, allowing it to be imported and used in other application parts.

Complete code

Please, check the console to see the work of the useEffect hook.

Challenge

Let's create a component responsible for filtering a list of items. The component renders a list of items and allows users to type into an input element to filter the list. Only the items that contain the inputted symbols should be displayed.

The task is:

• Import the necessary hooks from the react library.
• Set the initial value for the input element correctly.
• Specify the correct values for the dependency array in the useEffect hook.