When will you use this?

You need this before writing any React code — same as installing Word before writing a document.

• Every React job expects you to run projects locally with Node and a build tool like Vite.
• Interviewers often ask you to clone a repo and run npm install && npm run dev on day one.

Real-world: catch hook bugs before merge

A Freshdesk engineer forgets userId in a useEffect dependency array — infinite refetch loop in staging. ESLint react-hooks plugin flags it in the PR before customers see a frozen inbox.

Production-style code

// .eslintrc.cjs
module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

// Flagged code in PR:
useEffect(() => {
  loadTickets(filter); // uses filter but deps missing
}, []); // ⚠ react-hooks/exhaustive-deps

What happens in production: Common React foot-guns are caught locally and in CI — same guardrails used at Meta, Airbnb, and Indian product companies.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

npm install -D eslint prettier eslint-config-prettier
// .eslintrc or eslint.config.js enables rules for React

Line-by-line walkthrough

How it works (big picture)

• ESLint warns in the editor.
• Prettier runs on save to auto-format.
• Together they reduce silly bugs and formatting debates.

Do this on your computer

1. Add ESLint to a Vite project: npm create vite often includes a lint option.
2. Install Prettier and enable format on save in VS Code.
3. Fix red squiggles before committing code.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

ESLint = catch bugs and bad patterns. Prettier = auto-format code. Fix lint errors early.

Common questions