React - lesson 7 | HackIndia Skills

React - lesson 7 | HackIndia Skills | HackIndia

Common mistake

Common wrong effect

Beginners often store a filtered list in state, then use an effect to update it when the search text changes. That is not needed.

The filtered list can be computed from the current list and search text during render. Less state means fewer bugs.

function ProjectList({ projects, search }) {
  const visibleProjects = projects.filter((project) =>
    project.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <ul>
      {visibleProjects.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  );
}

Example

Useful effect

This effect is justified because document.title belongs to the browser, not React. The dependency list includes the value used inside the effect.

Call Hooks at the top level of your component. Do not put useEffect inside an if block, loop, or nested function.

import { useEffect, useState } from 'react';

export default function App() {
  const [projects, setProjects] = useState([]);
  const [name, setName] = useState('');

  useEffect(() => {
    document.title = `${projects.length} projects saved`;
  }, [projects.length]);

  function addProject(event) {
    event.preventDefault();
    const trimmedName = name.trim();
    if (!trimmedName) return;

    setProjects([
      ...projects,
      { id: crypto.randomUUID(), name: trimmedName }
    ]);
    setName('');
  }

  return (
    <form onSubmit={addProject}>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Project name"
      />
      <button>Add project</button>
    </form>
  );
}

Use effects only when needed

One rule

What counts external

Common wrong effect

Useful effect

Effect checklist

Use AI carefully

Do this now

Quick check