React - lesson 3 | HackIndia Skills

React - lesson 3 | HackIndia Skills | HackIndia

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>
  );
}

Use state without clutter

One idea

What state is for

State checklist

Counter example

Avoid duplicate state

Update objects safely

Use AI carefully

Do this now

Quick check