React Junior

Moving state into a global store so it is accessible from any component in the tree.

Moving shared state to the closest common ancestor so sibling components stay in sync.

Moving state into a ref so updates no longer trigger unnecessary re-renders of parents.

Moving local state into a child component so the parent re-renders less frequently overall.

Passing props through many intermediate layers; solved only by adding Redux or another state library.

Re-rendering deep child trees too often; solved with useMemo and splitting into smaller components.

Passing props through many intermediate layers; solved with the Context API and component composition.

Mutating props inside children directly; solved by memoizing components with React.memo and useCallback.

Passing too many props to one component at once; it becomes a problem when render performance noticeably degrades

Passing props through many intermediate components that don't use them; it hurts maintainability at deep levels

Mutating props directly inside a child component; it becomes a problem once the parent re-renders and overwrites them

Reading props before they are defined on mount; it becomes a problem when undefined values break the first render

Data flows in both directions automatically between parent and child, which keeps every component perfectly in sync

Data is stored globally and read by any component, so flow direction never matters and updates stay fully predictable

Data flows up via props while children mutate parent state directly, which removes the need for explicit callbacks

Data flows down via props while changes flow up via callbacks, making state updates predictable and easy to trace

Fragments add a hidden wrapper node that browsers ignore, so flexbox can still target it without breaking the layout

Fragments move children into a portal outside the tree, which avoids extra nodes but detaches them from flex parents

Fragments render a lightweight span node instead of a div, which keeps the DOM smaller while still scoping flex rules

Fragments group children without adding a DOM node, so layouts like flexbox apply directly to the real elements

State and props are both read-only, but only state can be shared down the tree to multiple nested child components

Props are private and mutable within a component, while state is read-only and passed in from a parent component

State is private and mutable within a component, while props are read-only and passed in from a parent

State and props are both mutable, but only props trigger a re-render when their underlying values actually change

JSX compiles into HTML strings that React injects into the page directly

JSX is syntactic sugar compiled into React.createElement() calls returning objects

JSX is parsed natively by the browser into real DOM nodes during runtime

JSX is converted into template literals that React evaluates lazily later

Capitalization tells the bundler to tree-shake unused components during builds

Lowercase names are treated as DOM tags while capitalized names map to components

Capital letters are required by the JavaScript class syntax used to define them

Lowercase names cause naming collisions with built-in React reserved keywords

Function components cannot hold state, so they suit only presentational UI pieces

Class components are faster since they avoid recreating functions on every render

Class components support hooks too but require binding methods in the constructor

Function components use hooks for state and effects, making logic simpler to reuse

Using && with 0 renders true since the expression short-circuits to a boolean

Using && with 0 renders nothing since React always skips falsy values silently

Using && with 0 renders the 0 itself because it is falsy but still a value

Using && with 0 throws an error because numbers cannot be rendered as JSX nodes

The children prop is an array of sibling components rendered next to each other

The children prop holds references to child instances for direct method calls now

The content nested between a component's tags is passed as props.children to render

The children prop must be explicitly passed as an attribute named children always

No array runs once before mount; empty array runs after every render; populated array runs only when all values match.

No array runs only on unmount; empty array runs on every update; populated array runs once when any listed value resets.

No array runs after every paint; empty array runs twice on mount; populated array runs until its values stop changing.

No array runs after every render; empty array runs once after mount; populated array runs when listed values change.

Keys cache rendered items; random or index keys disable caching and force only full re-renders

Keys validate props; random or index keys skip validation and silently drop the invalid items

Keys identify items; random or index keys cause wrong reuse, state bugs, and slow updates

Keys sort list items; using an index sorts numerically while random values shuffle the order

It registers an event listener on the provider and re-renders the component only when its own props change.

It reads a context's current value and re-renders the component whenever the nearest provider's value changes.

It creates a new context object and re-renders every component in the tree whenever any piece of state updates.

It memoizes the provider's value and re-renders only the children that are wrapped in React.memo.

It optimizes rendering performance by skipping unnecessary updates automatically at runtime

It highlights potential problems in development by double-invoking certain functions

It enforces stricter type checking on props and state throughout production builds

It prevents unsafe lifecycle methods from running by blocking them entirely in production

The Virtual DOM is a faster browser-native DOM that renders elements directly without any diffing at all.

The Virtual DOM stores components on the server and syncs them down to the real DOM over the network.

The Virtual DOM is a lightweight in-memory tree; React diffs it to batch and minimize costly real DOM updates.

The real DOM is a lightweight copy that React updates first before flushing it into the Virtual DOM.