React conventions and best practices you should be following
π thread..
π thread..
1. React UI componentβs names should be PascalCase.
Example: LoginScreen.js
All other helper files should be camelCase. (non-component files)
Example: commonUtils.js
Example: LoginScreen.js
All other helper files should be camelCase. (non-component files)
Example: commonUtils.js
2. Putting imports in an order
a. React import
b. Library imports (Alphabetical order)
c. Absolute imports from the project (Alphabetical order)
d. Relative imports (Alphabetical order)
e. Import * as
f. Import β./<some file>.<some extension>
a. React import
b. Library imports (Alphabetical order)
c. Absolute imports from the project (Alphabetical order)
d. Relative imports (Alphabetical order)
e. Import * as
f. Import β./<some file>.<some extension>
Each kind should be separated by an empty line. This makes your imports clean and easy to understand for all the components, 3rd-party libraries, etc.
3. If the component doesn't have children's props, use the self-closing tag.
4. Use object state if you have to update multiple states together.
Avoid using multiple setState calls in a row. This is a common mistake that can lead to a lot of unnecessary re-renders.
4. Use object state if you have to update multiple states together.
Avoid using multiple setState calls in a row. This is a common mistake that can lead to a lot of unnecessary re-renders.
It's better to use a single setState call.
5. Try to avoid class-based components and use functional components instead. Functional components not only reduce development time and code but also decrease production bundle size. It reduces the bundle size by almost 60%.
6.React.memo to avoid unnecessary re-renders. Use React.memo() wisely, don't use memo where components often re-renders with props.
7. Use JSX ShortHand, Try to use JSX shorthand for passing boolean variables.
7. Use JSX ShortHand, Try to use JSX shorthand for passing boolean variables.
That's a wrap!
If you enjoyed this thread:
1. Follow @codedamncom for more of these
2. RT the tweet below to share this thread with your audience
If you enjoyed this thread:
1. Follow @codedamncom for more of these
2. RT the tweet below to share this thread with your audience
Loading suggestions...