🪝 React Hooks – A Beginner-Friendly Guide

React Hooks changed the way we write React apps. They make function components powerful and simple to use. If you’re still using class components for everything, it might be time to explore Hooks!

🤔 What Are Hooks?

Hooks are functions that let you “hook into” React features like state, lifecycle, and context in function components.

Before Hooks, if you wanted to use state or componentDidMount, you had to write a class component. Now, with Hooks, function components can do everything.

🔥 Why Use Hooks?

Here are some reasons developers love Hooks:

🛠️ Most Common Hooks

Here are the most commonly used built-in hooks:

1. useState – Add State to a Function Component

import React, { useState } from 'react';

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

  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

✅ useState(0) means count starts at 0
✅ setCount() updates the value
✅ React re-renders the component when the state changes

2. useEffect – Side Effects (like fetch, timer)

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component mounted');

    return () => {
      console.log('Component will unmount');
    };
  }, []); // empty array = run only once

  return <p>Hello World!</p>;
}

✅ useEffect() runs after the component is shown
✅ It replaces componentDidMount, componentDidUpdate, and componentWillUnmount

3. useRef – Keep a Value Between Renders (or Access DOM)

import React, { useRef } from 'react';

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

  function handleClick() {
    inputRef.current.focus(); // focus the input box
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </>
  );
}

✅ useRef gives you access to DOM elements
✅ It can also store values without causing re-render

4. useContext – Use Global Values

const ThemeContext = React.createContext();

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

function Header() {
  const theme = React.useContext(ThemeContext);
  return <h1>The theme is {theme}</h1>;
}

✅ useContext() helps you use shared data (like theme or user)
✅ No need to pass props again and again

🧪 Bonus: Custom Hooks

You can create your own hook like this:

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

And use it in any component:

function MyPage() {
  useDocumentTitle("My Page");
  return <h1>Welcome</h1>;
}

🏁 Summary

📌 Final Thoughts

React Hooks made React development easier and cleaner. You no longer need classes to manage complex features. If you’re still new to React or just moving from class components, Hooks are the future — and they’re beginner-friendly too.