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...'}