Prepare for your Senior React Interview

The Death of useEffect for Fetching

The new use API

The Shift: We no longer need useEffect + useState + loading flags for simple data fetching. We can "unwrap" promises dir...

Forms Without Tears (useActionState)

Server Actions & State

The Shift: Forget onSubmit, e.preventDefault(), and creating generic isSubmitting states. React 19 handles the form life...

Component Communication (useFormStatus)

Deep State Access

The Shift: You have a SubmitButton nested deep in a form. In React 18, you had to pass loading props down 5 levels. In R...

The Optimistic UI (useOptimistic)

Instant Gratification

The Shift: Users hate waiting. Even if the server takes 2 seconds, show the change instantly....

The React Compiler (No More useMemo)

Automatic Optimization

The Shift: React 19 introduces the React Compiler (optional build tool). It automatically memoizes your components and v...

The Death of forwardRef

ref as a Prop

The Shift: For years, passing a ref to a child component was a nightmare. You had to wrap the child in forwardRef and se...

Native Metadata (RIP react-helmet)

Document Metadata Hoisting

The Shift: Changing the <title> or adding <meta> tags used to require 3rd party libraries or messy useEffect hacks. Reac...

Clean Context Providers

<Context> as a Provider

The Shift: We no longer need to type .Provider. It's a small change, but it removes visual noise....

Ref Callback Cleanup

ref Cleanup Functions

The Shift: When using a "Callback Ref" (a function passed to ref instead of a useRef object), you couldn't easily clean ...

The Architecture (Client vs Server)

Directives ("use client", "use server")

The Shift: While popularized by Next.js, these are now core React specifications. They define the "boundary" between cod...

Web Components Interop

Custom Elements Support

The Shift: React 18 and below struggled with Web Components (e.g., <my-slider>), often failing to pass properties correc...

Native Asset Loading (Styles & Scripts)

Resource Hoisting & Deduplication

The Shift: In React 18, if you wanted to lazy-load a stylesheet or a script for a specific component, you had to use ext...

The "Hydration Error" Fix

Debugging Sanity

The Shift: Everyone who has used Next.js or SSR knows the dreaded error: Text content does not match server-rendered HTM...

useDeferredValue Initial Config

Hiding the "Stale" State

The Shift: useDeferredValue is used to keep the UI responsive during heavy updates. Previously, you couldn't set an init...

Preloading APIs (preload, preinit)

Browser Hints

The Shift: Instead of manually adding <link rel="preload"> tags in your index.html and hoping they match your components...

What is React?

What is the history behind React evolution?

What are the major features of React?

What is JSX?

What is the difference between an Element and a Component?

How to create components in React?

When to use a Class Component over a Function Component?

What are Pure Components?

What is state in React?

What are props in React?

What is the difference between state and props?

What is the difference between HTML and React event handling?

What are synthetic events in React?

What are inline conditional expressions?

What is "key" prop and what is the benefit of using it in arrays of elements?

What is Virtual DOM?

How Virtual DOM works?

What is the difference between Shadow DOM and Virtual DOM?

What is React Fiber?

What is the main goal of React Fiber?

What are controlled components?

What are uncontrolled components?

What is the difference between createElement and cloneElement?

What is Lifting State Up in React?

What are Higher-Order Components?

What is children prop?

How to write comments in React?

What is reconciliation?

Does the lazy function support named exports?

Why React uses `className` over `class` attribute?

What are fragments?

Why fragments are better than container divs?

What are portals in React?

What are stateless components?

What are stateful components?

How to apply validation on props in React?

What are the advantages of React?

What are the limitations of React?

What are the recommended ways for static type checking?

What is the use of `react-dom` package?

What is ReactDOMServer?

How to use innerHTML in React?

How to use styles in React?

How events are different in React?

What is the impact of indexes as keys?

How do you conditionally render components?

Why we need to be careful when spreading props on DOM elements?

How do you memoize a component?

How you implement Server Side Rendering or SSR?

How to enable production mode in React?

Do Hooks replace render props and higher order components?

What is a switching component?

What are React Mixins?

What are the Pointer Events supported in React?

Why should component names start with capital letter?

Are custom DOM attributes supported in React v16?

How to loop inside JSX?

How do you access props in attribute quotes?

What is React proptype array with shape?

How to conditionally apply class attributes?

What is the difference between React and ReactDOM?

Why ReactDOM is separated from React?

How to use React label element?

How to combine multiple inline style objects?

How to re-render the view when the browser is resized?

How to pretty print JSON with React?

Why can't you update props in React?

How to focus an input element on page load?

How can we find the version of React at runtime in the browser?

How to add Google Analytics for React Router?

How do you apply vendor prefixes to inline styles in React?

How to import and export components using React and ES6?

What are the exceptions on React component naming?

Is it possible to use async/await in plain React?

What are the common folder structures for React?

What are the popular packages for animation?

What is the benefit of styles modules?

What are the popular React-specific linters?