React Best Practices

In the last lesson, React Reusable Utility Functions, you finished organizing your project. This lesson gathers the core React best practices from the whole course into one checklist you can come back to.

🤔 Why a final checklist?

Here’s the value. You’ve learned a lot of separate ideas across the course, and it helps to see the core habits together.

• It’s easy to remember a single concept but forget to apply it consistently.
• A checklist turns scattered lessons into habits you use on every project.
• It’s a quick reference when you’re reviewing your own code or someone else’s.

So this is your one-page summary of how to write good React, drawn from everything before it.

🧩 Components: small and focused

Start with components, the heart of React.

• Keep each component small, with one clear responsibility.
• Split presentational (display) from container (logic) when it makes both clearer.
• Use clear PascalCase names, one main component per file.
• Reuse components instead of copying similar UI around.

So well-shaped components are the base of a clean app. If a component is hard to name or runs very long, split it.

🎣 State and hooks

Next, the rules that keep state and hooks reliable.

• Follow the rules of hooks: call them at the top level, only in components or custom hooks.
• Keep state as local as possible; lift it up only when components must share it.
• Use the functional updater when new state depends on old state.
• Write honest dependency arrays, and clean up effects that start timers or listeners.
• Don’t use useEffect to compute a value you can derive during render.
• Prefer custom hooks to reuse logic, over older patterns like HOCs.

So state and hooks reward discipline: local state, honest dependencies, and cleanup. That prevents most React bugs.

📋 Lists, data, and the three states

Habits for rendering lists and handling data from outside.

• Give list items a stable, unique key, not the array index.
• Always handle three states for data: loading, error, and success.
• Show an empty state when a list comes back with nothing.
• Centralize API calls in a service layer, and keep config in environment variables.

So whenever you load data, plan for all the cases. A page that only handles the happy path feels broken the moment something is slow or fails.

⚡ Performance: measure first

The performance mindset, kept short.

• Don’t optimize on a hunch; measure with the Profiler first.
• Fix structure before memoizing: move state down, split components.
• Use React.memo, useMemo, and useCallback only where a real, heavy problem exists.
• Most components are fine as plain code; React is fast by default.

So treat optimization as a targeted fix for a measured problem, not a default style. Readable code that’s fast enough beats clever code.

🧹 Clean code overall

General habits that keep the whole app pleasant to work in.

• Organize the project sensibly: clear folders, co-located files, utilities in utils/.
• Name things for what they are, so code reads clearly.
• Don’t repeat yourself: extract repeated logic into hooks or utilities.
• Keep config and secrets out of the code; secrets stay on a backend.
• Be consistent. A predictable codebase is easier for everyone, including future you.

So clean code is mostly about consistency and not repeating yourself. The small habits add up to an app that’s easy to grow.

⚠️ Common Mistakes

A quick list of the traps this course warned about most.

• Giant do-everything components instead of small focused ones.
• Index as a list key, causing subtle bugs on reorder.
• useEffect used to derive data that should just be computed in render.
• Memoizing everything blindly instead of measuring first.
• Raw fetch and hardcoded URLs scattered across components.
• Putting secrets in front-end environment variables, where users can read them.

So if you avoid just these, your React code is already in good shape.

✅ Best Practices

The whole checklist, in one place.

• Keep components small, focused, and clearly named.
• Follow the rules of hooks; keep state local; write honest dependencies; clean up effects.
• Use stable unique keys; handle loading, error, empty, and success states.
• Centralize API calls; keep config in env vars; keep secrets on a backend.
• Measure before optimizing; fix structure before memoizing.
• Organize the project consistently and don’t repeat yourself.
• Turn on the ESLint hooks plugin.

🧩 What You’ve Learned

• ✅ Keep components small, focused, well-named, and reusable
• ✅ Follow the rules of hooks, keep state local, write honest dependencies, and clean up effects
• ✅ Use stable unique keys and always handle loading, error, empty, and success states
• ✅ Centralize API calls, keep config in env vars, and keep real secrets on a backend
• ✅ Measure before optimizing, and fix structure before reaching for memoization
• ✅ Organize consistently, don’t repeat yourself, and use the ESLint hooks plugin

🧠

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

1. 1

   What is the core idea behind most React best practices?

   Writing the shortest code possible Code that's easy to read, change, and trust Using every React feature available Avoiding all third-party libraries
   Check

   Why: Nearly every best practice serves readability and reliability. When unsure, choose what a teammate or future you will understand fastest.

2. 2

   What should you do before optimizing performance?

   Add React.memo everywhere Measure first with the Profiler to find the real problem Rewrite the app Remove all state
   Check

   Why: Always measure before optimizing. Most components are fine, and memoizing blindly adds complexity without real gain. Fix what the measurement shows.

3. 3

   How should you handle data loaded from an API?

   Only handle the success case Handle loading, error, and success (and an empty state for lists) Ignore errors Show a blank screen while loading
   Check

   Why: Always plan for all the states. A page that only handles success feels broken the moment a request is slow, fails, or returns nothing.

4. 4

   Which is a key state-and-hooks best practice?

   Call hooks inside if statements to save renders Keep state local, write honest dependency arrays, and clean up effects Use useEffect to derive every value Put all state at the top of the app
   Check

   Why: Keep state as local as possible, list every dependency an effect or memo reads, and clean up effects that start timers or listeners. These prevent most bugs.

Score: 0 / 4 Reset

🚀 What’s Next?

You now have the habits for clean, reliable React. Time to put everything into practice. The final module is all projects, where you build complete apps from scratch. First up is the classic everyone starts with: a Todo application.

React Todo Application