React Chapter 3: Introducing Hooks

Introducing React Hooks

• Hooks are a new feature introduced in React 16.8, allowing the use of state and other React features without writing a class.
• Hooks are functions that "hook into" React state and lifecycle features from function components.
• They do not work inside classes and are backward-compatible, meaning they do not contain any breaking changes.

Rules of Hooks

• There are two rules for using Hooks:
  • Only call Hooks at the top level
  • Only call Hooks from React functions

State in React

• "State" refers to the data that represents the current condition of a component.
• It's an object that holds some information that may change over the lifetime of the component.
• State allows React components to create dynamic and interactive UIs.
• There are two main types of components in React: functional components and class components.

useState Hook

• The useState hook allows you to have state variables in functional components.
• You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update the state value.
• useState can be used with simple types, as well as with objects and arrays.
• Each call to useState creates a single piece of state, holding a single value of any type.

Implementation of useState Hook

• We can create a React project that uses the useState hook to implement a counter application.
• The useState hook lets us keep local state in a function component.
• Inside the component, we declare a new state variable by calling the useState hook.
• It returns a pair of values, to which we give names (e.g. counter and setCounter).

useEffect Hook

• The useEffect hook is used to handle side effects, such as making API requests or interacting with browser APIs.
• Side effects should be separated from the rendering process.
• The function passed to useEffect is a callback function that is called after the component renders.
• The second argument is an array, called the dependencies array, which should include all of the values that our side effect relies upon.

How to use useEffect

• If the dependencies array is empty, the effect will only run once after the component has rendered the first time.
• If the dependencies array is not provided, the effect will run after every render, which can lead to problems.
• If we perform a side effect directly in our component body, it gets in the way of our React component's rendering.
• Side effects should be separated from the rendering process.

Common Mistakes with useEffect

• If we do not provide the dependencies array at all and only provide a function to useEffect, it will run after every render.
• If we forget to provide our dependencies correctly and we are setting a piece of local state within our useEffect, the default behavior of React is to re-render the component.
• This can lead to an infinite loop if we are updating state within our useEffect.

Fixing Common Mistakes with useEffect

• If you are updating state within your useEffect, make sure to provide an empty dependencies array.
• If you provide an empty array, the effect function will only run once after the component has rendered the first time.

useEffect with API Call

• We can use the useEffect hook to fetch data from an API.
• We import useState and useEffect from React and define a functional component.
• We use the useState hook to set the initial state and the useEffect hook to fetch data from the API.