🧠 Understanding useState, useEffect, and useRef in React (with Simple Examples)

React is a powerful JavaScript library for building user interfaces. If you're new to React or hooks, you might be wondering what these things are:

• useState

• useEffect

• useRef

These are React Hooks — functions that let you use state and other React features without writing a class.

In this blog, let's explore each one with simple examples and easy explanations.

---

🔄 useState - Managing State in Functional Components

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

✅ Syntax

const [state, setState] = useState(initialValue);

🧪 Example: Counter App

import React, { useState } from 'react';

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

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

export default Counter;

📘 Explanation

• count is the state variable.

• setCount is the function to update count.

• useState(0) initializes the count with 0.

---

⚙️ useEffect – Side Effects in Components

The useEffect hook lets you perform side effects like:

• Fetching data

• Updating the DOM

• Subscribing to events

✅ Syntax

useEffect(() => {
  // Your code here
}, [dependencies]);

🧪 Example: Log Count Changes

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

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

  useEffect(() => {
    console.log(`Count has changed to: ${count}`);
  }, [count]);

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

export default CounterWithEffect;

📘 Explanation

• The useEffect runs after the component renders.

• It only runs again when count changes because of the [count] dependency.

---

🧷 useRef – Referencing DOM Elements or Storing Values

The useRef hook gives you a way to:

• Access DOM elements directly

• Store mutable values that don’t cause re-renders

  ✅ Syntax

const myRef = useRef(initialValue);

🧪 Example: Focus an Input

import React, { useRef } from 'react';

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

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

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

export default FocusInput;

📘 Explanation

• inputRef is linked to the input using ref={inputRef}.

• inputRef.current gives you access to the actual DOM element.

• Clicking the button focuses the input.

---

✅ Summary Table

Hook	Purpose	Triggers Re-render?	Example Usecases
useState	Add local state to a component	✅ Yes	Counter, Form inputs
useEffect	Run side-effects (after render)	✅ Depends on deps	API calls, timers
useRef	Access DOM or store mutable values	❌ No	Focus input, timer IDs

---

🚀 Final Thoughts

React Hooks make it easier to write clean, functional components without the complexity of classes. Here's a quick rule of thumb:

• Use useState to store values that change and affect UI.

• Use useEffect to handle side effects like fetching data or setting up subscriptions.

• Use useRef when you want to persist values or directly interact with the DOM.

---

Happy Coding! 🎉

Let me know if you want examples for advanced hooks or how to combine them!
Satya Samaikya Venna