Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsIf a React component is not appearing, first find out whether React never mounted it, rendered no output, stopped during an error, or committed markup that CSS hides. Check the browser console, trace the tree from root.render to the component, and then inspect the DOM. That sequence separates the main causes quickly.
Start by locating where the render path breaks
React’s initial render starts when an app creates a root for a DOM element and calls root.render(<App />). React then calls components to determine the UI and commits the result to the DOM. Later renders can follow updates to state or an ancestor’s state. These are separate stages: a component can be absent from the tree, return no output, fail while rendering, or exist in the DOM but remain invisible. See React’s render and commit guide.
As an Amazon Associate I earn from qualifying purchases.
Use the fastest check first: open browser developer tools, look for build or console errors, and search the Elements panel for the expected element. If the element is present, investigate CSS and layout. If it is absent, work through the root, component reference, return value, conditions, state updates, and errors below.
1. The app never mounts the intended root
Verify that the code selecting the target DOM node succeeds and that execution reaches the call to root.render. Confirm that the tree passed to it is the one containing the component you expect. If the target lookup returns no element, the render call is skipped, or a different tree is mounted, that component cannot appear. React’s documented initial-render flow is described in Render and Commit.
#1 Best Overall
- Check the browser console and build output for an earlier error.
- Confirm the root target exists in the page and the code uses that target.
- Trace the component from the argument to
root.renderthrough its parent components.
2. The component does not return its JSX
A common mistake is using a block-bodied arrow function without an explicit return. The JSX in this example is evaluated but not returned:
const Panel = () => {
<section>Panel</section>;
};Return the element, or use an implicit-return expression:
const Panel = () => {
return <section>Panel</section>;
};
const Panel = () => <section>Panel</section>;Also inspect early returns: a branch may exit before reaching the JSX you expect. For class components, the render method must return a React node; see the Component reference.
3. The import, export, or JSX reference is wrong
Check that the component’s export matches the import syntax used by its parent, then confirm the parent renders it as JSX, for example <Panel />. A module mismatch or an incorrect reference can mean the intended component is never used. The specific default-versus-named export issue depends on your JavaScript module setup, so use the build output and console error to identify the mismatch rather than guessing.
React components should be used in JSX rather than called directly like ordinary functions. Direct calls can interfere with React’s ability to manage component behavior; consult the Rules of React.
4. A condition omits the JSX or returns nothing
Inspect conditions in both the parent and the component itself. React supports conditional output with if, &&, and ternary expressions. A component that returns null intentionally renders nothing, and a false condition can omit a child from the tree. The patterns are covered in React’s Conditional Rendering guide.
To identify the failing branch, temporarily show the condition’s input values or replace the conditional output with a stable marker. This helps establish whether the condition is false or whether the component is missing for another reason.
5. A state update does not trigger the render you expect
Update state with the setter returned by useState; do not mutate the state value directly. For objects and arrays, create a replacement value rather than changing the existing one and passing the same reference back. React may ignore an update when the next value is identical to the current value. The useState reference explains the setter behavior.
Best Value
// Replace an object rather than mutating it
setUser(previous => ({ ...previous, name: "Sam" }));State is a snapshot for the render that created an event handler. Calling a setter requests a later render; it does not change the value captured by the handler already running. Therefore, logging the state immediately after a setter call can show the old snapshot. Check the subsequent render or the committed UI instead. See State as a Snapshot.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.6. An exception interrupts rendering
Look for a console error and its component stack. If a component throws while rendering, the intended subtree may not appear. Fix the exception causing the failure; when a fallback is appropriate, an error boundary can display fallback UI for errors in descendant rendering. React documents error boundaries in the Component reference.
7. The element is in the DOM but CSS or layout hides it
If the expected node appears in the Elements panel, React has committed markup; the problem is likely after rendering. Inspect the element’s computed styles and its ancestors in developer tools. Check dimensions, visibility, positioning, and overlays that might cover it. The render-and-commit model helps distinguish React’s DOM update from the browser’s presentation of that DOM.
When the problem appears only in development
Strict Mode performs additional development-only checks, including extra render calls that help reveal impure components. A component should be a pure function of its props, state, and context; side effects do not belong in render. If behavior differs under Strict Mode, investigate purity and cleanup rather than treating the extra calls as a production rendering rule. See StrictMode and Keeping Components Pure.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
