Junior level: Lifecycle Methods and Hooks in React

React Hooks have revolutionized the way we write functional components in React, allowing us to use state and other React features without writing a class. This guide will introduce you to essential hooks, custom hooks, and advanced hook patterns to manage complex state and optimize performance.

Introduction to React Hooks

React Hooks are functions that let you "hook into" React state and lifecycle features from functional components. Hooks were introduced in React 16.8, and they provide a more direct way to use state and other React features in functional components.

Key Benefits of Hooks

1. Simpler Code: Hooks allow you to use state and lifecycle methods directly in functional components, leading to simpler and more readable code.
2. Reuse Logic: Custom hooks enable you to extract and reuse stateful logic across multiple components.
3. Enhanced Functional Components: Hooks provide all the power of class components, like managing state and side effects, without needing to use classes.

Essential Hooks

useState

useState is a hook that allows you to add state to functional components.

Example:

import React, { useState } from 'react';

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

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

export default Counter;

In this example, useState initializes the count state variable to 0. The setCount function updates the state when the button is clicked.

useEffect

useEffect is a hook that lets you perform side effects in functional components, such as fetching data, directly interacting with the DOM, and setting up subscriptions. It combines the functionality of several lifecycle methods in class components (componentDidMount, componentDidUpdate, and componentWillUnmount).

Example:

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Copy after login

In this example, useEffect fetches data from an API when the component mounts.

useContext

useContext is a hook that lets you access the context value for a given context.

Example:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

In this example, useContext accesses the current value of ThemeContext.

useReducer

useReducer is a hook that lets you manage complex state logic in a functional component. It is an alternative to useState.

Example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

In this example, useReducer manages the count state with a reducer function.

Custom Hooks

Custom hooks let you reuse stateful logic across multiple components. A custom hook is a function that uses built-in hooks.

Example:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Copy after login