JSX under the hood
JSX is transformed into function calls that create React elements.
tsx
const element = <button>Save</button>;Equivalent conceptually:
tsx
const element = React.createElement('button', null, 'Save');Rendering expressions
tsx
const user = { name: 'Sam' };
return <p>Hello, {user.name}</p>;Rendering arrays
tsx
const tags = ['react', 'typescript'];
return <ul>{tags.map(tag => <li key={tag}>{tag}</li>)}</ul>;Re-render cycle
React re-renders components when:
- State changes
- Parent re-renders with new props
- Context value changes
React then reconciles differences and applies minimal DOM updates.
Rendering best practices
- Keep render logic pure
- Avoid side effects during render
- Compute expensive values with
useMemowhen needed
Next, we will build reusable components.