React code conventions and best practices

React code conventions and best practices use linting and automatic formatter. Use PascalCase in components, interfaces, or type aliases. Prefer using typescript barrels A barrel is a way to roll up exports from several modules into a single convenient module.

Aug 03, 2022•3m read time•From levelup.gitconnected.com

Table of contents

React code conventions and best practices Use linting and automatic formatter Import order Naming conventions Prefer using typescript barrels Avoid default export Component structure Use PropsWithChildren Separate function from the JSX if it takes more than 1 line Avoid using indexes as key props Use fragments Prefer destructuring properties Separation of concerns Avoid huge components Group the state whenever possible Use shorthand for boolean props Avoid curly braces for string props Avoid using inline styles Prefer conditional rendering with ternary operator Use constants or enums for string values Use type aliases Don’t use third-party libraries directly Rely on abstraction instead of the implementation Prefer declarative programming Use descriptive variable names Avoid long list of function arguments Use object destructuring Prefer using template literals Use implicit return in small functions