📄️ Naming Convention
Guidelines for Choosing Names
📄️ Avoid Code Duplication
Don't Repeat Yourself
📄️ Avoid Nested IF Checks
- Nested if conditions are harder to read, as the reader has to move up and down to see what happens in else, which if case is wrapped under which and so on.
📄️ No of Lines in A Function
- Lesser the lines of code, the easier it is to read and understand.
📄️ Don't Store JSX in State
- The state should always be a serializable javascript object. JSX gets converted to React objects with React.createElement() at compile time by babel. And these objects are not always serializable.
📄️ Don't Create Contradicting States
In the above code it's easy to create a situation where both isLoading and isError is true and vice versa.
📄️ Don't Create Nested Components
📄️ Keys for React Elements
In JSX loops don't use random values such as Math.random() or the item index as the key of the item.
📄️ Keep Functions out of UI Code
UI section of the component should only contain UI code, functions in the middle of the UI breaks the continuity of the readers. Keep the logic / functions out of UI code.