I want to hear your personal opinion. And I would like to hear what way y'all prefer when working with React projects.

I'm currently working with a full-fledged ecommerce website. I would love to hear opinions from the community.

4 Replies 4

Keep it simple, manage the states properly, and use the hooks wisely. Let your components be small and functional. Be sure with whatever you are doing.

See React Best Practices – Tips for Writing Better React Code. It has covered most of it.

  1. Think hard before adding any library; how hard would it be to implement this functionality myself? Maintaining dependencies can be a pain as a project grows.

  2. Stay away from state management libraries as long as you can in a project. Only start using them when it becomes glaringly obvious you need to.

  3. Learn how to create custom hooks. You'll sometimes find yourself copying and pasting logic from component to component. A rule of thumb: more than three copy and pastes = encapsulate that logic in a custom hook.

  4. Separate components into Presentational and Container components. Presentational components handle how something looks and Container components handle how it functions. This makes debugging a lot easier down the line. Read Dan Abramov's article for more.

  5. Don't delve too deep into testing. Often, a few simple tests are more than enough, even just testing whether a component renders. The curve of diminishing returns is strong as you increase the number of tests you write on the front end.

Best practices can only really be promulgated by the vendor/supplier/author of a tool/library and not by its users.

Unfortunately for us, the official site, React.dev, does not have a single best practices article, but their principles and recommendations are loosely scattered about their react.dev/lean pages.

For example, "Principles for structuring state" gives five guidelines for your state graph design: "Group related state", "Avoid contradictions in state", "Avoid redundant state", "Avoid duplication in state", "Avoid deeply nested state".

Elsewhere, similarly they caution us against using Effects because React's development team thinks React users are overusing them, so it's an implied best practice to avoid using useEffect, unless you absolutely know you need it.

Here are some best practices I personally follow when working with React (especially for larger applications like E-commerce):

1. Keep components small
Split the UI into small reusable components and move business logic into custom hooks. It makes everything cleaner and easier to maintain.

2. Organize code by feature
A feature-based folder structure scales better than separating files by type.
Example:

/features/cart
/features/products

3. Use the right state tools

  • React Query for API/server state

  • Redux Toolkit or Zustand for application state (cart, filters, authentication UI)

4. Use a service layer
Keep all API calls in a /services folder instead of writing them inside components.

5. Use TypeScript
Helps prevent bugs and keeps large codebases consistent.

6. Use linting + formatting
ESLint and Prettier improves code quality and reduces team conflicts.

7. Optimize only when needed
Lazy load heavy pages and avoid unnecessary rerenders, but don’t overuse useMemo or useCallback.

Your Reply

By clicking “Post Your Reply”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.