React & Next.js

Rendering, state, effects, hydration and routing problems with scoped fixes.

70 troubleshooting guides · Page 2 / 3

25. Why does a memoized React callback submit an old record ID?

    useCallback preserves the function until its dependencies change.

26. Why does useMemo not fix an incorrect React calculation?

    useMemo caches a calculation; it neither validates inputs nor makes mutation observable.

27. Why does my React error boundary not catch a failed save request?

    Error boundaries handle errors during descendant rendering and supported lifecycle work, not ordinary asynchronous event-handler rejections.

28. Why does React lazy report an invalid element type for a named export?

    lazy expects the loaded module object to expose a default component.

29. Why does a Suspense fallback not appear for fetch inside useEffect?

    An ordinary Effect runs after rendering and its promise does not automatically suspend the component.

30. Why does a React transition make my controlled input lag?

    The state backing a controlled text input should update synchronously in onChange.

31. Does useDeferredValue debounce a React search request?

    It defers rendering a value; it does not impose a fixed delay or guarantee fewer network requests.

32. How do I subscribe React to an external store without stale renders?

    Use useSyncExternalStore with a subscribe function returning cleanup and a getSnapshot that returns a stable snapshot until data changes.

33. Why does React hydration fail when a component displays the current time?

    The server render and first client render must agree.

34. Why does React render a stray zero before an empty list?

    items.length && <List /> evaluates to numeric zero when the list is empty, and React renders that number.

35. Why do two React tabs disagree about the selected item?

    Independent local copies drift when each component owns selection.

36. How do I prevent contradictory loading and error flags in React?

    Separate booleans can allow impossible combinations such as loading and successful at once.

37. How do I stop a React scroll listener from accumulating after navigation?

    When subscribing imperatively, remove the same function with the matching capture setting during cleanup.

38. Why is a React DOM ref null when I try to focus a custom input?

    A ref becomes available after the DOM node is committed, and a wrapper must pass it to the actual input.

39. How do I expose focus without exposing an entire React input DOM node?

    Use useImperativeHandle to expose a small handle such as {focus: () => inputRef.current?.focus()} while keeping the underlying node in a private ref.

40. How do I find which React interaction causes a slow commit?

    Record the problematic interaction in React DevTools Profiler, then compare the expensive subtree and its changed props.

41. Why does window remain undefined after I add use client in Next.js?

    A Client Component can still participate in server prerendering.

42. Why can I not pass an ordinary callback from a Server Component to a Client Component?

    The server/client boundary needs values React can serialize through that boundary.

43. Why does making a Next.js Client Component async cause an error?

    Client Components cannot be declared as async components in this model.

44. Why do route params need await after upgrading the App Router?

    Modern App Router versions expose page params asynchronously.

45. Why does cookies().get stop working after a Next.js upgrade?

    Use the async request API contract supported by the installed release: Review the route’s rendering and cache behavior because request-specific data changes the assumptions.

46. Why can a Server Component read cookies but fail when setting one?

    Cookie mutation requires a response-producing context that supports it, such as an appropriate Server Function or Route Handler, and must occur before response streaming prevents header changes.

47. Why does useSearchParams work in development but fail a production build without Suspense?

    A statically rendered route using a client search-parameter reader may need a Suspense boundary around the smallest subtree that reads it.

48. Why does NextRouter was not mounted appear inside an App Router page?

    Check whether the component imports the Pages Router hook from next/router.

Ask your own question · Sign in to post questions and answers.