ReactJS Hooks

Hooks are a powerful feature in React that allow you to use state and other React features without writing a class. Let’s explore a few common hooks with examples.

1. useState Hook

The useState hook allows you to add state to functional components.

Example:

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable named "count" and a function to update it called "setCount"
  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;

• Explanation: In this example, useState(0) initializes a state variable count with a value of 0. The setCount function updates the state. Each time the button is clicked, setCount(count + 1) increments the count by 1.

2. useEffect Hook

The useEffect hook lets you perform side effects in function components. It is similar to componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

Example:

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

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>Timer: {count} seconds</p>
    </div>
  );
}

export default Timer;

• Explanation: In this example, useEffect sets up an interval that increments the count state by 1 every second. The cleanup function clearInterval(interval) ensures that the interval is cleared when the component unmounts.

3. useContext Hook

The useContext hook lets you subscribe to React context without introducing nesting.

Example:

import React, { useContext } from 'react';

// Create a Context
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'dark' ? '#333' : '#FFF', color: theme === 'dark' ? '#FFF' : '#000' }}>
      I am styled by theme context!
    </button>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

export default App;

• Explanation: In this example, ThemeContext provides a theme value to the ThemedButton component using the useContext hook. The button’s style changes based on the context value.

Summary

• useState: Manages state in functional components.
• useEffect: Performs side effects in functional components.
• useContext: Subscribes to React context.

These hooks simplify state management and side effects in functional components, making React code cleaner and easier to understand.