React - lesson 3 | HackIndia Skills

Key point

One idea

State is component memory. Use it for data that changes over time because of user interaction, like a selected tab, a counter, or a saved draft title.

Do not store data that comes from props or can be calculated during render. Less state means fewer bugs.

What state is for

In a React app, your component runs, returns JSX, and React shows it. When the user clicks, types, or selects something, the UI may need to remember a new value. That is when you reach for useState.

For your HackIndia repo, reviewers should see state that has a reason. A filter button, a like count, an active project idea, or a form draft is clear. A duplicate value that can be calculated is clutter.

Your to-do

State checklist

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Ask if the value changes over time.
Check if the value is already passed from a parent as props.
Check if the value can be computed from existing props or state.
Keep it in state only if it cannot be derived during render.
Name the setter clearly, like setSelectedCategory or setCount.

0 of 5 done

Example

Counter example

useState returns two things: the current value and a setter function. Call the setter in an event handler.

Do not write count = count + 1. React will not treat that as a state update.

import { useState } from 'react';

export default function VoteButton() {
  const [votes, setVotes] = useState(0);

  function handleVote() {
    setVotes(votes + 1);
  }

  return (
    <button onClick={handleVote}>
      Votes: {votes}
    </button>
  );
}

Common mistake

Avoid duplicate state

A common beginner mistake is storing a computed value in state, then trying to keep it in sync. That adds extra code and can go stale.

If you can calculate it from current data, calculate it while rendering. You do not need useEffect for ordinary calculation.

function CartSummary({ items }) {
  const total = items.reduce((sum, item) => sum + item.price, 0);

  return <p>Total: ₹{total}</p>;
}

Example

Update objects safely

State should be replaced, not mutated. If your state is an object, create a new object with the changed field.

This keeps React updates predictable and makes your code easier to inspect in a repo.

import { useState } from 'react';

export default function ProjectDraft() {
  const [draft, setDraft] = useState({
    title: 'UPI expense splitter',
    category: 'Fintech'
  });

  function renameProject() {
    setDraft({
      ...draft,
      title: 'Hostel expense splitter'
    });
  }

  return (
    <section>
      <h2>{draft.title}</h2>
      <p>{draft.category}</p>
      <button onClick={renameProject}>Rename</button>
    </section>
  );
}

Tip

Use AI carefully

You can ask an AI tool: “Review this React component. Which values should be state, and which should be computed during render?”

Check the answer. If it suggests useEffect just to calculate a value from props or state, reject that pattern. Compute the value directly instead.