React
Overview
React is the UI model for composing stateful views from reusable components.
Why It Matters
Most frontend work ends up inside React, so understanding its rendering model prevents subtle UI bugs.
Core Concepts
- Components are functions of props and state.
- Rendering is not the same as committing to the DOM.
- Effects are for external synchronization, not derived state.
Mental Models
Think in data flow. If the UI is wrong, ask which state source or render path produced it.
Best Practices
- Keep components focused.
- Derive values during render when possible.
- Use effects only when a side effect is needed.
Common Mistakes
- Storing derived state.
- Triggering effects to fix render logic.
- Overusing component boundaries for simple UI.
Trade-offs
More components can improve reuse, but too many tiny files make the flow hard to follow.
Decision Framework
| Question | Prefer |
|---|---|
| Is the value derived from props/state? | Calculate it in render |
| Does the UI talk to the outside world? | useEffect or a data layer |
Examples
function Greeting({ name }: { name: string }) {
return <p>Hello, {name}</p>;
}Checklists
- Is state minimized?
- Are effects truly necessary?
- Can the component be understood in one screen?
Senior Engineer Notes
Senior engineers keep React code predictable. The best component tree is the one that makes the next bug obvious.