1. React is mainly used for developing ______.
React focuses on building interactive user interfaces for web and mobile apps. It doesn't handle databases or backend logic.
Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Netflix · React
Practice React questions specifically asked in Netflix interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
28
Tagged for this company + subject
Company
Netflix
View company-wise questions
Subject
React
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your Netflix React round.
React focuses on building interactive user interfaces for web and mobile apps. It doesn't handle databases or backend logic.
For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.
Prop drilling happens when you pass data through many nested components just to reach a deeply nested child. It can make code harder to maintain and understand.
Use React.memo, useCallback, useMemo to avoid unnecessary renders. Code-split with React.lazy, lazy-load images, and virtualize long lists with react-window.
Hooks are special functions that let you use React features like state and lifecycle inside functional components. They were introduced to avoid complex class components and make logic reusable.
Group code by feature: `components/`, `pages/`, `hooks/`, `context/`, `services/`, and `assets/`. Keep reusable components separate and avoid deep nesting. Use index.js barrels for cleaner imports.
Portals let you render components outside the main DOM hierarchy, useful for modals or tooltips that need to escape parent overflow or z-index issues.
ReactDOM.createPortal(<Modal />, document.getElementById('portal-root'));Main features include the use of Virtual DOM for performance, component-based architecture for reusability, one-way data flow for predictability, and JSX for writing UI with HTML-like syntax inside JavaScript.
useEffect() is used to perform side effects like fetching data, updating the DOM, or setting up subscriptions after render. It replaces lifecycle methods like componentDidMount and componentDidUpdate.
useEffect(() => {
console.log('Effect runs after render');
}, []);The Real DOM updates the UI directly and is slow for frequent changes. The Virtual DOM is a lightweight copy stored in memory that React updates first, and only the differences are applied to the real DOM, making it much faster.
React keeps two versions of the Virtual DOM—previous and current. When a change occurs, React compares them (diffing) and updates only the changed parts in the real DOM, making rendering fast and efficient.
Functional components are simple JavaScript functions that return JSX. Class components are ES6 classes that extend React.Component and use a render() method. Functional components are now preferred because they are simpler and support Hooks.
// Functional Component
function Welcome() {
return <h1>Hello!</h1>;
}
// Class Component
class Welcome extends React.Component {
render() {
return <h1>Hello!</h1>;
}
}In controlled components, form data is handled by React state. In uncontrolled components, the DOM itself manages the input value using refs. Controlled components provide better validation and consistency.
// Controlled
<input value={text} onChange={(e) => setText(e.target.value)} />
// Uncontrolled
<input ref={inputRef} />Directly changing state (like this.state.count = 1) won’t trigger a re-render and can cause bugs. Always use setState() or Hooks to update state safely.
React cleans up side effects automatically when a component unmounts or before the effect runs again. Returning a cleanup function inside useEffect prevents memory leaks.
React compares each dependency value on re-render. If any value changes, the effect re-runs. This helps control when side effects occur and avoid unnecessary work.
Refs are used to access or modify DOM elements directly, store previous values, and hold data that doesn’t need to trigger re-renders.
Custom hooks make logic reusable, easy to test, and separate UI from logic. They also simplify large components by organizing related logic together.
Both reuse logic across components. HOCs wrap components and add behavior, while custom hooks share logic using functions. Hooks are simpler and avoid nesting issues caused by HOCs.
React re-renders components when their state or props change. It uses a diffing algorithm to update only the affected parts of the DOM.
<Redirect> was used in React Router v5 for navigation. In React Router v6, it was replaced with <Navigate>. <Navigate> is a declarative way to redirect users to another route programmatically and is simpler to use with hooks and state.
<Navigate to='/home' replace />
Create a wrapper route that checks if the user is authenticated. If not, redirect them to login. This ensures only logged-in users can access certain pages.
const PrivateRoute = ({ children }) => isAuth ? children : <Navigate to='/login' />;When a component unmounts during an async call, you should cancel ongoing operations. This can be done with AbortController, cleanup functions in useEffect, or checking mounted flags before updating state.
useEffect(() => {
const controller = new AbortController();
fetch('/api', { signal: controller.signal });
return () => controller.abort();
}, []);Call the API inside useEffect after the first render, update state with results, and handle errors gracefully. Axios simplifies HTTP requests and error handling.
useEffect(()=>{axios.get('/api').then(r=>setData(r.data)).catch(e=>setError(e));},[]);Auth-based apps show different UI for logged-in users. Conditional rendering hides private components until the user is authenticated.
Hooks are lightweight and reduce boilerplate, but improper use of effects can cause extra renders. With memoization, they perform equally or better.
React Context allows data to be shared globally across components without passing props manually at every level. It is useful for themes, authentication, and global state.
const ThemeContext = React.createContext('light');
<ThemeContext.Provider value='dark'><App/></ThemeContext.Provider>;Unnecessary re-renders happen when state or props change unnecessarily, or when functions or objects are recreated each render. Prevent them using React.memo, useMemo, useCallback, and by avoiding direct mutations of state.
React is flexible, integrates easily, supports SSR, and offers performance benefits with Virtual DOM.