React is the dominant way to build user interfaces on the web. The hard parts are re-render timing, identity, and effect cleanup.
Hook rules, stale closures inside effects, key-based reconciliation, when memo actually helps, and how server components change where code runs.
Where it shows up: Frontend and full-stack roles, plus React Native mobile teams that share the same mental model.
Twenty real React questions from the library, code snippet included. Nothing here is paraphrased for search engines. It is the same text a signed-in user sees.
// this has nothing to do with question, it's a test question
const Abc = () => {
const [a, v] = useState("abc");
return (
<div>
new abc
dkkdkd
<span>
Nice working
</span>
</div>
)
}// legacy pattern
const [snap, setSnap] = useState(store.getSnapshot());
useEffect(() => {
const unsub = store.subscribe(() => setSnap(store.getSnapshot()));
return unsub;
}, []);function Hi({name}){return <p>Hi {name}</p>} <Hi name="Alice"/>const ThemeContext = React.createContext('light');
function App() {
return <Child />; // no Provider anywhere
}
function Child() {
const theme = useContext(ThemeContext);
console.log(theme);
return null;
}const [searchParams, setSearchParams] = useSearchParams();
const goToPage = (n) =>
setSearchParams({ page: String(n) });<label htmlFor="email">Email</label>
<input id="email" />useEffect(() => {
const sub = subscribe(id);
return () => {
console.log('cleanup');
sub.unsubscribe();
};
}, [id]);createBrowserRouter([
{
path: '/',
element: <Root/>, // renders <Outlet/>
errorElement: <RootError/>,
children: [
{ path: 'reports', element: <Reports/>, loader: reportsLoader }, // loader throws
],
},
]);const onClick = useCallback(() => {
console.log(count);
}, []);const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
}, [count]);
return <button onClick={() => setCount(c => c + 1)}>+</button>;function Search({ query }) {
const run = useCallback(() => {
fetch(`/s?q=${query}`);
}, []); // query omitted
return <Child onRun={run} />;
}function Ticker() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => setCount(count + 1), 1000);
return () => clearInterval(id);
}, []);
return <span>{count}</span>;
}const active = useSelector((state) => state.items.filter((i) => i.active));function useData(url) {
const [data, setData] = useState(null);
const refetch = () => fetch(url).then(r => r.json()).then(setData);
return { data, refetch };
}function Field() {
const [v, setV] = useState('');
return <input value={v} />;
}function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}<Suspense fallback={<Spinner />}>
<LazyA />
<LazyB />
</Suspense>const Input = forwardRef((props, ref) => {
// ref is forwarded here
return <input {...props} />;
});function useFeature(enabled) {
if (enabled) {
const [value, setValue] = useState(0); // A
}
const [count, setCount] = useState(0); // B
useEffect(() => {}, []); // C
return count;
}function handleChange(e) {
setText(e.target.value); // urgent
startTransition(() => {
setFilter(e.target.value); // transition (low priority)
});
}We keep the correct answer, the explanation and the scoring behind sign-in so the platform stays honest, which is why the answer options and the worked explanation for every React question stay behind a free account. Signing in is free and takes a few seconds.
42 distinct React topics are tagged across the library. These are the real topic labels stored on the questions, not a hand-written list.
…