React JS Last-Minute Revision

30 quick revision notes for React JS

1. React is a library for building UIs from components; it updates the DOM by diffing a new virtual tree against the previous one.
2. JSX compiles to jsx() function calls from react/jsx-runtime, so it must return a single root element or a Fragment.
3. Keys must be stable and unique among siblings; using array indexes breaks state when lists reorder, filter or delete items.
4. Props are read-only inputs from the parent; state is owned by the component and changing it triggers a re-render.
5. State updates are batched and each render sees a snapshot, so use the updater form setCount(c => c + 1) for sequential updates.
6. Never mutate state; create new objects and arrays with spread, map and filter so React detects the change by reference.
7. Hooks must be called at the top level of components or custom hooks, never inside conditions, loops or after early returns.
8. useEffect with no array runs after every render, with [] once on mount, and with [deps] whenever a dependency changes.
9. Return a cleanup function from useEffect to clear timers, remove listeners, close sockets and abort fetch requests.
10. In development StrictMode mounts, unmounts and remounts components, so effects run twice to expose missing cleanup.
11. useMemo caches a computed value, useCallback caches a function, and React.memo skips re-rendering when props are shallowly equal.
12. The React Compiler 1.0 automatically memoises components and values at build time, reducing the need for manual useMemo and useCallback.
13. useRef stores a mutable value or DOM reference that persists across renders without causing a re-render when it changes.
14. In React 19, ref can be passed as a normal prop to function components, so forwardRef is no longer required.
15. React 19 adds Actions, useActionState, useFormStatus, useOptimistic and the use API for reading promises and context.
16. useTransition marks updates as non-urgent and useDeferredValue gives a lagging copy of a value to keep typing responsive.
17. Context is best for rarely changing global values; every consumer re-renders when the provider value changes.
18. Redux Toolkit uses configureStore, createSlice and createAsyncThunk, and Immer lets reducers use safe mutating syntax.
19. Server state such as API data should be handled by TanStack Query or RTK Query for caching, deduplication and refetching.
20. React Router uses useParams for dynamic segments, useSearchParams for query strings, useNavigate for redirects and Outlet for nested layouts.
21. Single-page apps need the server to return index.html for unknown paths, otherwise refreshing a deep link gives a 404.
22. Controlled inputs keep value in state with onChange; uncontrolled inputs keep value in the DOM and are read with refs or FormData.
23. Code splitting with React.lazy and Suspense loads components as separate chunks only when they are needed.
24. Core Web Vitals are LCP under 2.5 seconds, INP under 200 milliseconds and CLS under 0.1 for a good user experience.
25. React Testing Library tests behaviour by querying by role and label; findBy waits for async content and queryBy checks absence.
26. Mock Service Worker mocks network requests at the network level so the same mocks work in tests and the browser.
27. Error boundaries catch render errors in children but not errors in event handlers or asynchronous code.
28. Server Components run only on the server and ship no JavaScript; files marked 'use client' become interactive Client Components.
29. Hydration attaches React to server-rendered HTML; mismatches come from random values, dates, window access or invalid HTML nesting.
30. Only environment variables prefixed with NEXT_PUBLIC_ in Next.js or VITE_ in Vite reach the browser, so never put secrets there.

Night-before checklist

• Revise your saved questions on this page once, aloud.
• Read the quick notes and mark any you cannot explain in one line.
• Rehearse a two-minute self-introduction and two project stories.
• Keep CV, ID, laptop charger and interview link ready; sleep on time.