Comprehensive List of React Best Practices

In this article, I have collected comprehensive list of  React JS best practices. Some of them are from react offical guide and other are from various sources in the internet. Let me know if I have missed something via comment.

Best practices for React Official Docs

1. Props must be read only.
2. Resources taken by any other resources should br free up when they are destroyed.
3. Do not modify state directly. Use function to modify them.
4. Neither parent nor child components should know if a certain component is stateful or stateless, and whether a function or a class.
5. Bind the function in constructor to avoid
6. React events are named using camelCase, rather than lowercase.
7. For a component to hide itself return null from render
8. Key is a required string attribute when creating lists of elements
9. Elements generated inside a map() call need key
10. Keys within arrays should be unique among their siblings
11. When several components reflect the same changing data lift shared state up to a common ancestor
12. Instead of writing shouldComponentUpdate() inherit from React.PureComponent where possible
13. Avoid in-place mutation by using Object.assign, spread operator (…), and non-mutating operations
14. You can use Immutable.js, seamless-immutable, or immutability-helper.
15. Keys should be stable, predictable, and unique.

React Context:

1. Majority of applications do not need to use context.
2. If you want your application to be stable, don’t use context.
3. If you aren’t familiar with state management libraries like Redux or MobX, don’t use context.

Refs and Dom

1. Typical React dataflow, props are the only way that parent components interact with their children.
2. Refs are for a few cases to imperatively modify a child outside of the typical dataflow.
3. When should we use ref:
   1. Managing focus, text selection, or media playback.
   2. Triggering imperative animations.
   3. Integrating with third-party DOM libraries.

Higher Order Components:

1. Use HOC for cross cuttings concerns.
2. A HOC compose the original component by wrapping it in the container component.
3. Do not mutate the original component. We should use composition instead.
4. Pass unrelated props through to the wrapped component.
5. Warp the display name for easy debugging.
6. Apply HOCs outside the component definition so that the resulting component is created only once.
7. Be aware that refs aren’t passed through. Might end up unexpected behaviors.

Render Props:

1. Render props are alternative to HOCs for cross-cutting concerns
2. Render props enabling shared state or behavior between components.
3. Higher order components cab be implemented with the render props.
4. Prefer instance methods to avoid triggering extra redraws.

Extra:

1. We can limit the rate at which callback is executed via throttling and denouncing.

Presentational and Container Component:

It is generally recommended to separate component into presentational or container components. Here are the best practice guide for both types of components.

Presentational Components:

1. Concerned with how thing look.
2. Allow containments via this.props
3. Often have styles.
4. Have no dependencies on rest of approach.
5. Don’t specify how data is loaded or mutated.
6. Receive data and callback exclusively via props.
7. Rarely have their own state.

Container Components:

1. Concerned with how thing will work.
2. Usually don;t have any DOM markup of their own.
3. Provide data and behavior to presentational or other container components.
4. Are often stateful.

Because functional components are easier to understand, use them unless you need state, lifecycle hooks, or performance optimizations

Best Practices From Other Sources

Here are the list of best practices from other sources which I find useful.

1. Prefer functional components over class based
2. Prefer state initialization in class member variable declaration over constructor
3. Pass functions to setState()
4. Avoid passing closures to sub-components
5. Use named functions to facilitate debugging
6. Use short circuit evaluation when rendering on only one side of a condition
7. Minimize nested ternary conditional expressions
8. Breaking components up into containers and presentation.
9. Always define a defaultProps.
10. 10 Omit value when it is explicitly true
11. Use many small components
12. Render lists in dedicated components
13. Don’t use array indexes as keys
14. Bind functions early
15. Normalize relationships in entity tree
16. Log errors with Raven
17. avoid nested state
18. Keep things immutable
19. Centralize state
20. Thinner reducers
21. Put logic in action creators
22. Consider using Saga
23. Use stateless components as much as possible
24. Import the functions you need, not entire modules
25. Bind functions in constructor
26. Keep state as minimal as possible
27. Respect the single source of truth when managing state

References

1. React Official Guide
2. Muse Find
3. Medium
4. Image: Unsplash