Here are five essential React hooks every frontend developer must understand 🧐

1. useState

• Purpose: To manage state in functional components.
• How it works: It returns an array with two elements: the state value and a function to update it.

Example:

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

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

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

2. useEffect

• Purpose: To handle side effects like data fetching, subscriptions, or manually updating the DOM.
• How it works: It runs after the render phase and can depend on certain variables.

Example:

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

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

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

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

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

export default Timer;

3. useContext

• Purpose: To share state or functions across components without prop drilling.
• How it works: It uses a Context object to provide and consume shared data.

Example:

jsx
import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ backgroundColor: theme === "dark" ? "#333" : "#FFF" }}>Theme: {theme}</button>;
}

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

export default App;

4. useRef

• Purpose: To directly access or modify a DOM element or persist a mutable value that doesn’t trigger re-renders.
• How it works: It provides a ref object with a .current property.

Example:

jsx
import React, { useRef } from "react";

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me!" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

export default FocusInput;

5. useMemo

• Purpose: To optimize performance by memoizing expensive calculations.
• How it works: It recalculates a value only when its dependencies change.

Example:

jsx
import React, { useState, useMemo } from "react";

function ExpensiveCalculation({ num }) {
  const compute = (n) => {
    console.log("Expensive calculation...");
    return n * 2;
  };

  const result = useMemo(() => compute(num), [num]);

  return <p>Result: {result}</p>;
}

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ExpensiveCalculation num={count} />
    </div>
  );
}

export default App;

These are just the basics of React hooks, and you can combine them in powerful ways to manage state, side effects, and other logic in your React applications.