Understanding React Lifecycle Methods

Introduction to React Hooks

React Hooks allow you to use state and other React features without writing a class. They are a great way to handle state and side effects in functional components.

Basic Hooks

React provides several built-in hooks. Here are the most commonly used:

• useState: Allows you to add state to your functional components.
• useEffect: Enables you to perform side effects in your components.
• useContext: Allows you to use the context API more easily.

Using useState

The useState hook is simple to use. Here’s a quick 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>
  );
}

Side Effects with useEffect

To handle side effects, you can use the useEffect hook. It runs after every render and can replace lifecycle methods.

Here’s a basic example:

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // Cleanup on unmount
  }, []);

  return <p>Timer: {seconds} seconds</p>;
}

Custom Hooks

You can also create your own hooks to encapsulate logic. Here’s a simple custom hook:

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return width;
}

Conclusion

React Hooks make it easier to manage state and side effects in your components. With hooks, you can write cleaner, more functional code.

This markdown body includes:

• Various headings (##, ###)
• Code blocks with JavaScript examples
• Bullet lists
• A brief introduction and conclusion