1. useState: Data That Changes Your View 💡

State is simply data that your component needs to remember and watch. When this data changes, React must re-render the component to update the UI.

The useState Hook is how you manage this dynamic data.

How It Works (The Syntax):

When you call useState, it doesn’t just return a value; it returns an array with exactly two items:

1. The current state value (the actual data).
2. A setter function to update that value.

We use array destructuring to pull these two items out:

import React, { useState } from 'react';

function Counter() {
  // 1. 'count' is the current value (starts at 0)
  // 2. 'setCount' is the function to change it
  const [count, setCount] = useState(0); 

  const handleClick = () => {
    // DO NOT use count++. Use the setter function!
    setCount(count + 1);
  };

  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

The Rule of State:

NEVER modify the state variable directly (count = 5 is forbidden!!!). Always use the setter function (setCount). This is how React knows when to trigger a re-render.

2. useEffect: Running Code After Rendering ⚙️

Every time your component renders (or re-renders due to a state change), React updates the screen. But what if you need to run some code after that update is finished? This is where you use useEffect.

This Hook is built for side effects—operations that interact with the “outside world,” such as:

• Fetching data from an API.
• Manually updating the DOM title (document.title).
• Setting up subscriptions or timers.

How It Works (The Dependency Array):

useEffect takes two arguments:

1. A function (the code you want to run).
2. An optional dependency array ([]).

The dependency array is the most important part. It tells React when to re-run the effect:

Example: Updating the Document Title

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

function TitleUpdater() {
  const [value, setValue] = useState('Initial Title');

  // This effect runs whenever 'value' changes.
  useEffect(() => {
    document.title = `Current Value: ${value}`;
    console.log('Document title updated!');
  }, [value]); // Dependency: Re-run when 'value' changes

  return (
    <input 
      type="text" 
      value={value} 
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

The Cleanup Function (The Return):

If your effect sets up something that needs to be torn down (like a subscription or timer), useEffect lets you return a cleanup function. This function runs before the component is destroyed (or before the effect re-runs).

useEffect(() => {
  const timerId = setInterval(() => {
    // do something every second
  }, 1000);

  // RETURN the cleanup function!
  return () => {
    clearInterval(timerId); // Stop the timer when component unmounts
  };
}, []); // Runs once

The Takeaway: useState gives your component a memory, and useEffect lets your component talk to the world outside of React. Master these two, and you’ve mastered the foundation of modern functional components.