React Hooks are one of the most impactful features introduced in React 16.8. React was already a powerful JavaScript library for building user interfaces. This (useState, useEffect, and useContext) transformed the way we manage state, side effects, and shared logic within functional components—making class components almost obsolete.

Whether you’re building a basic counter or a full-stack application, understanding useState in React, useEffect in React JS, and useContext is essential.

🔍 What Are React Hooks?

Hooks are built-in functions that let functional components access React features like state, lifecycle, and context. Previously, only class components could handle these. Now, with hooks, we write cleaner, more readable code with fewer lines.

Hooks must follow two basic rules:

• Only call hooks at the top level of a component or custom hook Always use hooks at the top of your React function or custom hook—never inside loops, conditions, or nested functions.
  • Why?
    React uses the order of hook calls to track state across renders.
  • React needs to run hooks in the same order every time.
    If you put them inside an if or loop, React gets confused and breaks.
• Only call hooks from React functions (components or custom hooks) Only call hooks inside React components or custom hooks, not in regular JavaScript functions.
  • Why?
    Hooks rely on React’s internal render system. If you call them in normal JS functions, React has no way to manage their state, leading to unexpected behavior.
  • Hooks only work inside React components or custom hooks.
    Using them in normal functions won’t let React track or update them properly

Hooks need a clear, safe place to live — always at the top, always inside React.

---

🟢How to Use the useState in React

useState is a Hook that lets you add state to functional components

useState lets your React component remember a value (like a number or text) and change it when needed — like a memory for your UI. Like a variable that survives re-renders.

For example, when you click a “Like” button and the count increases, useState helps the site remember how many times you clicked — without refreshing or forgetting.

---

✅ Basic useState Example

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

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

🧩 Real-World Example: To-Do Item Toggle

const TodoItem = ({ task }) => {
  const [completed, setCompleted] = useState(false);

  return (
    <div onClick={() => setCompleted(!completed)}>
      <p style={{ textDecoration: completed ? 'line-through' : 'none' }}>
        {task}
      </p>
    </div>
  );
};

⚠️ Common Mistake

Don’t assume setState happens immediately. Updates are asynchronous. Never rely on the current state value in the next line after setting it.

✅ Best Practice

Use functional updates if new state depends on previous state:

setCount(prev => prev + 1);

Imagine a counter that increases every time you click a button.
If you click fast, using setCount(prev => prev + 1) makes sure each click adds correctly, even if React batches updates behind the scenes.

It’s safer than setCount(count + 1) when the new value depends on the old one.

---

🔵 How to Use the useEffect in React JS

useEffect is a React Hook that lets you synchronize a component with an external system.

What it is (simple):
useEffect is used to tell React: “Hey, once the page loads (or changes), do this extra thing.”

Real life Example of useEffect 

Imagine you’re on an e-commerce website.
You open a product page and suddenly you see:
“You viewed this item 3 days ago”
or
“Customers also bought…”

You didn’t click anything — it just appeared automatically after the page loaded.

👉 That automatic behavior — checking your previous activity or showing suggestions — is powered by useEffect.

---

✅ Basic useEffect for API Call

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(setData);
}, []);

🧪 Real-World Example: Weather App

const Weather = () => {
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.weatherapi.com/current')
      .then(res => res.json())
      .then(data => {
        setWeather(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading weather...</p>;
  return <p>{weather.location}: {weather.temp}°C</p>;
};

🧹 Cleanup Example

useEffect(() => {
  const timer = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(timer);
}, []);

⚠️ Common Pitfall: Missing Dependency

Always include all external variables used inside useEffect in the dependency array. Otherwise, your code may behave unpredictably.

---

🟣 How to Use the useContext

useContext is a React Hook that lets you read and subscribe to context from your component.

useContext allows a component to access data from a React Context without having to manually pass props through every level of the component tree.

What it is (simple):

useContext lets parts of your app share the same info, like a central brain for common settings.

Real life Example of useContext 

magine you’re on a website with a dark mode toggle.
You click “Dark Mode” in the top corner — and the whole site updates: header, footer, sidebar, and all pages turn dark.

You didn’t update each section manually — they all automatically knew to change.

👉 That’s useContext in action — sharing the theme setting across the whole app.

---

📌 Step 1: Create the Context

const ThemeContext = React.createContext();

📌 Step 2: Provide Context

<ThemeContext.Provider value={{ theme, toggleTheme }}>
  <App />
</ThemeContext.Provider>

📌 Step 3: Consume Context

const { theme } = useContext(ThemeContext);

🎯 Real-World Example: Dark Mode

const ThemeToggle = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return <button onClick={toggleTheme}>Switch to {theme === 'dark' ? 'light' : 'dark'} mode</button>;
};

❓ useContext vs Redux

useContext is ideal for simple global state (auth, theme). For large apps with complex state, Redux or Zustand might scale better.

---

📋 When to Use Each Hook

Scenario	Recommended Hook
Local state	useState
Side effects / API calls	useEffect
Global/shared state	useContext
Complex logic	useReducer
Memoized computation	useMemo

---

🧠 Best Practices with React Hooks

• Always define hooks at the top level
• Group related state updates
• Break out repeated logic into custom hooks
• Don’t overuse context—know when to use Redux or Zustand

---

❓ React Hooks SEO FAQ

What are React Hooks used for?

They allow functional components to manage state, effects, context, and more—without writing class components.

Can I use useState multiple times?

Yes! Each useState call is independent and tracks its own piece of state.

What’s the difference between useEffect and useLayoutEffect?

useEffect runs after render, while useLayoutEffect runs synchronously before the browser paints.

Is useContext better than Redux?

useContext is great for small-scale state sharing. Redux or Zustand is better for large applications with complex state.

---

🔚 Conclusion

React Hooks like useState, useEffect in React JS, and useContext simplify modern React development. With clean code, reusable logic, and better performance, they’re essential to any frontend developer’s toolkit.

Want to learn more? Try creating your own custom hooks or explore advanced ones like useReducer, useRef, and useCallback.

📌 Bookmark this guide, and check out the official React Docs for deeper dives.

---

📚 Want to Learn More About React & React Native?

Once you’re comfortable with React hooks like useState, useEffect, and useContext, you might be curious about how these concepts translate to React Native — especially if you’re preparing for interviews or job roles.

Here are some helpful resources to take your knowledge further:

• 🔹 Basic React Native Interview Questions & Answers – A great place to start if you’re just getting into React Native.

• 🔹 Intermediate React Native Interview Questions & Answers – For developers with some experience looking to sharpen their understanding.

• 🔹 Advanced React Native Interview Questions & Answers – Tackle high-level topics to impress in senior-level interviews.

• 🔹 React JS Training in Chennai – Prefer hands-on learning? Our training program offers guided instruction, projects, and mentorship.

These guides pair well with what you’ve just learned about React Hooks — especially if you’re aiming to build mobile apps or prepare for job interviews!

---

Updated July 2025