Seonglae ChoReact's true strength lies in "the ability to compose components into larger components." This increases code cohesion by keeping logic, styles, and markup together in one place. Nesting multiple conditions (
isPending, !data, data) within JSX for rendering different states increases cognitive load and makes the code harder to read.- Extract the common UI structure (layout) into a separate
Layoutcomponent.
- Use early return for state-based UI instead of JSX conditionals.
Component Composition is great btw
Component composition is one of the best parts of React, and I think we should take more time to break our components into manageable parts before littering one component with conditional renderings.
https://tkdodo.eu/blog/component-composition-is-great-btw
Conditional Rendering – React
The library for web and native user interfaces
https://react.dev/learn/conditional-rendering
