QReact · Interview preparation
How are React Server Components different from client components?
Server Components render on the server and can reduce client JavaScript, while interactive components still need client-side behavior.
The idea to remember.
Server Components render on the server and can reduce client JavaScript, while interactive components still need client-side behavior. Framework integration determines routing, data boundaries and how the two types compose.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: pass content through children
01 / BEGINNERCompose a reusable panel without hardcoding its content.
function Panel({ title, children }) {
return <section><h2>{title}</h2>{children}</section>;
}Intermediate: share state with context
02 / INTERMEDIATEPut truly shared values in context, not every temporary input.
const ThemeContext = React.createContext('light');
function ThemeLabel() {
const theme = React.useContext(ThemeContext);
return <span>Theme: {theme}</span>;
}Real scenario: reducer for complex UI
03 / REAL SCENARIOGroup related updates in a reducer for a multi-step workflow.
function reducer(state, action) {
if (action.type === 'NEXT') return { ...state, step: state.step + 1 };
if (action.type === 'BACK') return { ...state, step: Math.max(0, state.step - 1) };
return state;
}
const [wizard, dispatch] = React.useReducer(reducer, { step: 0 });02Check your understanding
Try it in your own words.
Explain how are React Server Components different from client components without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗