Article Idea: Lean React

[raphael-arce]

Opinionated easier to read React:

• prefer self-closing components (<Component /> over <Component></Component>)
• use children over label/title/text
• prefer native web elements/apis instead of react states (e.g. dialogs)
• extract your states instead of prop-drilling
• keep your components small with a humanly readable (and understandable!) name
• Avoid useEffects to make things happen when a value changes. Prefer normal functions.
• don't use useEffect directly, extract it in a named hook that describes what it does (self-documentating code > commented documentation)
• Avoid higher order functions (e.g. a function that takes an argument derived from a state and generates a function that uses this state. Often ends up in using an outdated value)
• self-documenting code (what is happening?) > code comments (if previous not enough, why is it happening? > documentation (if previous not enough)
• prefer smaller, „dumber“ components that are used for one purpose (small, dumb > bigger, „smarter“ components that are used for many purposes (-> low coupling high cohesion)
• prefer map over repetition when possible
• if the array becomes big, prefer class: "hidden" over completely adding/removing elements from the dom

TBC