React Framework Practice Exam

Question 1 React Framework

What is the Virtual DOM?

useMemo memoizes a computed value: useMemo(() => val, [deps]).
useCallback memoizes a function reference: useCallback(fn, [deps]).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). The Virtual DOM is a lightweight in-memory representation of the real DOM. When state changes, React creates a new virtual DOM tree, diffs it against the previous one, and applies only the minimal set of changes to the real DOM — a process called reconciliation. State is a mutable data object managed within a component that determines how the component renders and behaves. When state changes, React re-renders the component. In functional components, state is managed with the useState hook. Events use camelCase naming and accept a function reference:
<button onClick={handleClick}>Click</button>
React wraps native events in a SyntheticEvent for cross-browser compatibility. Do not call the function: onClick={handleClick()} is wrong.

Question 2 React Framework

What is the difference between useMemo and useCallback?

const ThemeCtx = React.createContext('light');
Provide it: <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
Consume it: const theme = useContext(ThemeCtx); useMemo memoizes a computed value: useMemo(() => val, [deps]).
useCallback memoizes a function reference: useCallback(fn, [deps]).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). Use a unique, stable identifier such as a database ID. Avoid using the array index as a key when the list can be reordered, filtered, or modified, because it causes incorrect state mapping and rendering bugs. The key prop helps React identify which items have changed, been added, or removed in a list. It must be unique among siblings. Proper keys enable efficient reconciliation and preserve component state correctly.

Question 3 React Framework

What are React lifecycle methods?

State updates are batched for performance. React groups multiple setState calls into a single re-render to avoid unnecessary DOM updates. This means you cannot rely on reading the new state value immediately after calling the setter. Custom hooks are JavaScript functions whose names start with use that can call other hooks. They let you extract and reuse stateful logic across components without changing the component hierarchy. Example: function useWindowSize() { ... } Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys. Lifecycle methods are special methods on class components invoked at specific phases:

Mounting: componentDidMount
Updating: componentDidUpdate
Unmounting: componentWillUnmount

Functional components use useEffect instead.

Question 4 React Framework

What is the difference between controlled and uncontrolled components?

Pass a callback function as a prop from the parent to the child. The child calls the function with data as an argument:
<Child onSubmit={handleData} />
Inside Child: props.onSubmit(value); Controlled: Form data is handled by React state; the input value is set via value and updated via onChange.
Uncontrolled: Form data is managed by the DOM itself; you read values with a ref. Controlled components are generally preferred. useMemo memoizes a computed value: useMemo(() => val, [deps]).
useCallback memoizes a function reference: useCallback(fn, [deps]).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys.

Question 5 React Framework

What is lifting state up in React?

Lifting state up means moving shared state to the closest common ancestor of the components that need it. The ancestor holds the state and passes it down as props, enabling sibling components to share and synchronize data. A class component is an ES6 class that extends React.Component and must implement a render() method. It can hold local state and use lifecycle methods:
class App extends React.Component { render() { return <h1>Hello</h1>; } } Lazy loading defers loading a component until it is needed, reducing the initial bundle size:
const LazyComp = React.lazy(() => import('./MyComp'));
Wrap it in <Suspense fallback={<Spinner />}> to show a fallback while loading. Create a ref and attach it to a JSX element via the ref attribute:
const inputRef = useRef(null);
<input ref={inputRef} />
Then access it: inputRef.current.focus();

Question 6 React Framework

What are custom hooks in React?

The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

Custom hooks are JavaScript functions whose names start with use that can call other hooks. They let you extract and reuse stateful logic across components without changing the component hierarchy. Example: function useWindowSize() { ... } useMemo memoizes a computed value so it is only recalculated when its dependencies change:
const result = useMemo(() => expensiveCalc(a, b), [a, b]);
It helps avoid expensive recalculations on every render. useEffect lets you perform side effects in functional components (data fetching, subscriptions, DOM manipulation). It runs after render.
useEffect(() => { /* effect */ return () => { /* cleanup */ }; }, [dependencies]);

Question 7 React Framework

How do you access a DOM element with useRef?

Portals let you render a child into a different DOM node outside the parent component's DOM hierarchy:
ReactDOM.createPortal(child, domNode)
Common use cases include modals, tooltips, and popups that need to break out of overflow or z-index constraints. props.children contains the content between the opening and closing tags of a component:
<Card><p>Hello</p></Card>
Inside Card, props.children is the <p> element. It enables component composition. Create a ref and attach it to a JSX element via the ref attribute:
const inputRef = useRef(null);
<input ref={inputRef} />
Then access it: inputRef.current.focus(); JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code inside JavaScript. JSX is transpiled to React.createElement() calls by tools like Babel before running in the browser.

Question 8 React Framework

How do you create and use a React Context?

The Virtual DOM is a lightweight in-memory representation of the real DOM. When state changes, React creates a new virtual DOM tree, diffs it against the previous one, and applies only the minimal set of changes to the real DOM — a process called reconciliation. const ThemeCtx = React.createContext('light');
Provide it: <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
Consume it: const theme = useContext(ThemeCtx); Controlled: Form data is handled by React state; the input value is set via value and updated via onChange.
Uncontrolled: Form data is managed by the DOM itself; you read values with a ref. Controlled components are generally preferred. Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys.

Question 9 React Framework

What is React.memo?

The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

Use a unique, stable identifier such as a database ID. Avoid using the array index as a key when the list can be reordered, filtered, or modified, because it causes incorrect state mapping and rendering bugs. JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code inside JavaScript. JSX is transpiled to React.createElement() calls by tools like Babel before running in the browser. React.memo is a higher-order component that memoizes a functional component. It skips re-rendering if the props have not changed (shallow comparison):
const MemoComp = React.memo(MyComponent);

Question 10 React Framework

What is the useCallback hook?

Lifting state up means moving shared state to the closest common ancestor of the components that need it. The ancestor holds the state and passes it down as props, enabling sibling components to share and synchronize data. const ThemeCtx = React.createContext('light');
Provide it: <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
Consume it: const theme = useContext(ThemeCtx); useCallback returns a memoized version of a callback function that only changes when its dependencies change:
const handler = useCallback(() => doSomething(id), [id]);
Useful when passing callbacks to optimized child components. A SyntheticEvent is React's cross-browser wrapper around the native browser event. It has the same interface as native events (stopPropagation, preventDefault) but works consistently across all browsers.

Question 11 React Framework

Can functional components be Error Boundaries?

No. Error Boundaries can only be implemented as class components because they rely on static getDerivedStateFromError() and componentDidCatch(), which have no hook equivalents. However, libraries like react-error-boundary provide a wrapper. useEffect lets you perform side effects in functional components (data fetching, subscriptions, DOM manipulation). It runs after render.
useEffect(() => { /* effect */ return () => { /* cleanup */ }; }, [dependencies]); React is a JavaScript library developed by Facebook for building user interfaces. It uses a component-based architecture and a virtual DOM for efficient rendering of dynamic, interactive web applications. Lifting state up means moving shared state to the closest common ancestor of the components that need it. The ancestor holds the state and passes it down as props, enabling sibling components to share and synchronize data.

Question 12 React Framework

How do you pass data from child to parent in React?

useMemo memoizes a computed value so it is only recalculated when its dependencies change:
const result = useMemo(() => expensiveCalc(a, b), [a, b]);
It helps avoid expensive recalculations on every render. Pass a callback function as a prop from the parent to the child. The child calls the function with data as an argument:
<Child onSubmit={handleData} />
Inside Child: props.onSubmit(value); A class component is an ES6 class that extends React.Component and must implement a render() method. It can hold local state and use lifecycle methods:
class App extends React.Component { render() { return <h1>Hello</h1>; } } Conditional rendering means showing different UI based on conditions. Techniques:

Ternary: {isLoggedIn ? <Dashboard /> : <Login />}
Logical AND: {hasError && <Error />}
Early return inside the component

Question 13 React Framework

What is conditional rendering in React?

An Error Boundary is a class component that catches JavaScript errors in its child component tree during rendering, lifecycle methods, and constructors. It implements static getDerivedStateFromError() and/or componentDidCatch() to display a fallback UI. Key techniques:

React.memo to avoid unnecessary re-renders
useMemo / useCallback to memoize values and functions
Code splitting with React.lazy and Suspense
Proper key usage in lists
Virtualizing long lists with libraries like react-window

Conditional rendering means showing different UI based on conditions. Techniques:

Ternary: {isLoggedIn ? <Dashboard /> : <Login />}
Logical AND: {hasError && <Error />}
Early return inside the component

useCallback returns a memoized version of a callback function that only changes when its dependencies change:
const handler = useCallback(() => doSomething(id), [id]);
Useful when passing callbacks to optimized child components.

Question 14 React Framework

What is a functional component in React?

Lazy loading defers loading a component until it is needed, reducing the initial bundle size:
const LazyComp = React.lazy(() => import('./MyComp'));
Wrap it in <Suspense fallback={<Spinner />}> to show a fallback while loading. useContext lets a component consume a value from a React context without wrapping it in a Context.Consumer.
const value = useContext(MyContext);
The component re-renders whenever the context value changes. JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code inside JavaScript. JSX is transpiled to React.createElement() calls by tools like Babel before running in the browser. A functional component is a plain JavaScript function that accepts props as an argument and returns JSX. Example:
function Greeting({ name }) { return <h1>Hello, {name}</h1>; }

Question 15 React Framework

How does useEffect replicate componentDidMount?

Key techniques:

React.memo to avoid unnecessary re-renders
useMemo / useCallback to memoize values and functions
Code splitting with React.lazy and Suspense
Proper key usage in lists
Virtualizing long lists with libraries like react-window

useState returns an array with two elements: the current state value and a setter function.
const [count, setCount] = useState(0);
Calling setCount(count + 1) schedules a re-render with the updated value. Pass an empty dependency array to useEffect:
useEffect(() => { // runs once on mount }, []);
The effect fires after the first render only, mimicking componentDidMount. The dependency array controls when the effect runs:

[] — runs only on mount
[a, b] — runs when a or b change
No array — runs after every render

Question 16 React Framework

How does useEffect replicate componentWillUnmount?

Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow data to flow top-down (unidirectional) through the component tree and cannot be modified by the receiving component. Controlled: Form data is handled by React state; the input value is set via value and updated via onChange.
Uncontrolled: Form data is managed by the DOM itself; you read values with a ref. Controlled components are generally preferred. Return a cleanup function from useEffect with an empty dependency array:
useEffect(() => { return () => { // runs on unmount }; }, []); Custom hooks are JavaScript functions whose names start with use that can call other hooks. They let you extract and reuse stateful logic across components without changing the component hierarchy. Example: function useWindowSize() { ... }

Question 17 React Framework

What is the useLayoutEffect hook?

No. Error Boundaries can only be implemented as class components because they rely on static getDerivedStateFromError() and componentDidCatch(), which have no hook equivalents. However, libraries like react-error-boundary provide a wrapper. Create a ref and attach it to a JSX element via the ref attribute:
const inputRef = useRef(null);
<input ref={inputRef} />
Then access it: inputRef.current.focus(); useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state:
const [state, dispatch] = useReducer(reducer, initialState);
You update state by dispatching actions to the reducer. useLayoutEffect fires synchronously after DOM mutations but before the browser paints. Use it when you need to read layout from the DOM and re-render synchronously (e.g., measuring element size). Prefer useEffect for most side effects.

Question 18 React Framework

What is the difference between state and props?

const ThemeCtx = React.createContext('light');
Provide it: <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
Consume it: const theme = useContext(ThemeCtx); Props are passed in from a parent and are read-only. State is managed internally by the component and is mutable via setter functions. Both trigger a re-render when they change.

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React function components or custom hooks

These rules ensure hooks are called in the same order on every render. The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

Question 19 React Framework

What is an Error Boundary?

No. Error Boundaries can only be implemented as class components because they rely on static getDerivedStateFromError() and componentDidCatch(), which have no hook equivalents. However, libraries like react-error-boundary provide a wrapper. An Error Boundary is a class component that catches JavaScript errors in its child component tree during rendering, lifecycle methods, and constructors. It implements static getDerivedStateFromError() and/or componentDidCatch() to display a fallback UI. The Virtual DOM is a lightweight in-memory representation of the real DOM. When state changes, React creates a new virtual DOM tree, diffs it against the previous one, and applies only the minimal set of changes to the real DOM — a process called reconciliation. <React.StrictMode> is a development-only wrapper that activates additional checks and warnings:

Detects unsafe lifecycle methods
Warns about deprecated APIs
Double-invokes certain functions to detect side effects

It has no effect in production.

Question 20 React Framework

What is React.StrictMode?

React.memo is a higher-order component that memoizes a functional component. It skips re-rendering if the props have not changed (shallow comparison):
const MemoComp = React.memo(MyComponent); A class component is an ES6 class that extends React.Component and must implement a render() method. It can hold local state and use lifecycle methods:
class App extends React.Component { render() { return <h1>Hello</h1>; } } <React.StrictMode> is a development-only wrapper that activates additional checks and warnings:

Detects unsafe lifecycle methods
Warns about deprecated APIs
Double-invokes certain functions to detect side effects

It has no effect in production. Lazy loading defers loading a component until it is needed, reducing the initial bundle size:
const LazyComp = React.lazy(() => import('./MyComp'));
Wrap it in <Suspense fallback={<Spinner />}> to show a fallback while loading.

Question 21 React Framework

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code inside JavaScript. JSX is transpiled to React.createElement() calls by tools like Babel before running in the browser. A functional component is a plain JavaScript function that accepts props as an argument and returns JSX. Example:
function Greeting({ name }) { return <h1>Hello, {name}</h1>; } Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys. useRef returns a mutable ref object whose .current property persists across renders without causing re-renders.
Common uses:

Accessing DOM elements directly
Storing mutable values (e.g., timers, previous state)

Question 22 React Framework

What is prop drilling and how do you avoid it?

const ThemeCtx = React.createContext('light');
Provide it: <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
Consume it: const theme = useContext(ThemeCtx); Prop drilling is passing props through many intermediate components that don't use them, just to reach a deeply nested child. Solutions:

Context API
State management libraries (Redux, Zustand)
Component composition

Lifecycle methods are special methods on class components invoked at specific phases:

Mounting: componentDidMount
Updating: componentDidUpdate
Unmounting: componentWillUnmount

Functional components use useEffect instead. React is a JavaScript library developed by Facebook for building user interfaces. It uses a component-based architecture and a virtual DOM for efficient rendering of dynamic, interactive web applications.

Question 23 React Framework

What are React Portals?

Conditional rendering means showing different UI based on conditions. Techniques:

Ternary: {isLoggedIn ? <Dashboard /> : <Login />}
Logical AND: {hasError && <Error />}
Early return inside the component

Portals let you render a child into a different DOM node outside the parent component's DOM hierarchy:
ReactDOM.createPortal(child, domNode)
Common use cases include modals, tooltips, and popups that need to break out of overflow or z-index constraints. State updates are batched for performance. React groups multiple setState calls into a single re-render to avoid unnecessary DOM updates. This means you cannot rely on reading the new state value immediately after calling the setter. useCallback returns a memoized version of a callback function that only changes when its dependencies change:
const handler = useCallback(() => doSomething(id), [id]);
Useful when passing callbacks to optimized child components.

Question 24 React Framework

What is the useReducer hook?

Controlled: Form data is handled by React state; the input value is set via value and updated via onChange.
Uncontrolled: Form data is managed by the DOM itself; you read values with a ref. Controlled components are generally preferred. useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state:
const [state, dispatch] = useReducer(reducer, initialState);
You update state by dispatching actions to the reducer. A HOC is a function that takes a component and returns a new enhanced component:
const Enhanced = withAuth(MyComponent);
HOCs enable cross-cutting concerns like authentication, logging, and theming without modifying the original component. Conditional rendering means showing different UI based on conditions. Techniques:

Ternary: {isLoggedIn ? <Dashboard /> : <Login />}
Logical AND: {hasError && <Error />}
Early return inside the component

Question 25 React Framework

What value should you use for keys in a list?

Events use camelCase naming and accept a function reference:
<button onClick={handleClick}>Click</button>
React wraps native events in a SyntheticEvent for cross-browser compatibility. Do not call the function: onClick={handleClick()} is wrong. Key techniques:

React.memo to avoid unnecessary re-renders
useMemo / useCallback to memoize values and functions
Code splitting with React.lazy and Suspense
Proper key usage in lists
Virtualizing long lists with libraries like react-window

useState returns [value, setValue]. Update with a new value: setValue(5), or with a functional updater when the new state depends on the old: setValue(prev => prev + 1). The functional form avoids stale state bugs. Use a unique, stable identifier such as a database ID. Avoid using the array index as a key when the list can be reordered, filtered, or modified, because it causes incorrect state mapping and rendering bugs.

Question 26 React Framework

What is a SyntheticEvent in React?

Return a cleanup function from useEffect with an empty dependency array:
useEffect(() => { return () => { // runs on unmount }; }, []); const ThemeCtx = React.createContext('light');
Provide it: <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
Consume it: const theme = useContext(ThemeCtx); Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys. A SyntheticEvent is React's cross-browser wrapper around the native browser event. It has the same interface as native events (stopPropagation, preventDefault) but works consistently across all browsers.

Question 27 React Framework

What is the useContext hook?

Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys. useContext lets a component consume a value from a React context without wrapping it in a Context.Consumer.
const value = useContext(MyContext);
The component re-renders whenever the context value changes. The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

useMemo memoizes a computed value: useMemo(() => val, [deps]).
useCallback memoizes a function reference: useCallback(fn, [deps]).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Question 28 React Framework

Why are keys important in React lists?

useMemo memoizes a computed value so it is only recalculated when its dependencies change:
const result = useMemo(() => expensiveCalc(a, b), [a, b]);
It helps avoid expensive recalculations on every render. A HOC is a function that takes a component and returns a new enhanced component:
const Enhanced = withAuth(MyComponent);
HOCs enable cross-cutting concerns like authentication, logging, and theming without modifying the original component. useState returns [value, setValue]. Update with a new value: setValue(5), or with a functional updater when the new state depends on the old: setValue(prev => prev + 1). The functional form avoids stale state bugs. Keys give each element a stable identity so React can efficiently track, reorder, add, or remove items during reconciliation. Without proper keys, React may re-render entire lists unnecessarily or produce bugs with component state.

Question 29 React Framework

What is the useEffect hook?

Portals let you render a child into a different DOM node outside the parent component's DOM hierarchy:
ReactDOM.createPortal(child, domNode)
Common use cases include modals, tooltips, and popups that need to break out of overflow or z-index constraints. useEffect lets you perform side effects in functional components (data fetching, subscriptions, DOM manipulation). It runs after render.
useEffect(() => { /* effect */ return () => { /* cleanup */ }; }, [dependencies]); useState returns [value, setValue]. Update with a new value: setValue(5), or with a functional updater when the new state depends on the old: setValue(prev => prev + 1). The functional form avoids stale state bugs. A class component is an ES6 class that extends React.Component and must implement a render() method. It can hold local state and use lifecycle methods:
class App extends React.Component { render() { return <h1>Hello</h1>; } }

Question 30 React Framework

What is the purpose of the key prop in React?

Pass an empty dependency array to useEffect:
useEffect(() => { // runs once on mount }, []);
The effect fires after the first render only, mimicking componentDidMount. Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow data to flow top-down (unidirectional) through the component tree and cannot be modified by the receiving component. Props are passed in from a parent and are read-only. State is managed internally by the component and is mutable via setter functions. Both trigger a re-render when they change. The key prop helps React identify which items have changed, been added, or removed in a list. It must be unique among siblings. Proper keys enable efficient reconciliation and preserve component state correctly.

Question 31 React Framework

What is state in React?

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React function components or custom hooks

These rules ensure hooks are called in the same order on every render. The dependency array controls when the effect runs:

[] — runs only on mount
[a, b] — runs when a or b change
No array — runs after every render

State is a mutable data object managed within a component that determines how the component renders and behaves. When state changes, React re-renders the component. In functional components, state is managed with the useState hook. Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys.

Question 32 React Framework

What is reconciliation in React?

The dependency array controls when the effect runs:

[] — runs only on mount
[a, b] — runs when a or b change
No array — runs after every render

The key prop helps React identify which items have changed, been added, or removed in a list. It must be unique among siblings. Proper keys enable efficient reconciliation and preserve component state correctly. Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys. Conditional rendering means showing different UI based on conditions. Techniques:

Ternary: {isLoggedIn ? <Dashboard /> : <Login />}
Logical AND: {hasError && <Error />}
Early return inside the component

Question 33 React Framework

Why is setState asynchronous in React?

Lifting state up means moving shared state to the closest common ancestor of the components that need it. The ancestor holds the state and passes it down as props, enabling sibling components to share and synchronize data. Pass a callback function as a prop from the parent to the child. The child calls the function with data as an argument:
<Child onSubmit={handleData} />
Inside Child: props.onSubmit(value); useMemo memoizes a computed value: useMemo(() => val, [deps]).
useCallback memoizes a function reference: useCallback(fn, [deps]).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). State updates are batched for performance. React groups multiple setState calls into a single re-render to avoid unnecessary DOM updates. This means you cannot rely on reading the new state value immediately after calling the setter.

Question 34 React Framework

How does the useState hook work?

A SyntheticEvent is React's cross-browser wrapper around the native browser event. It has the same interface as native events (stopPropagation, preventDefault) but works consistently across all browsers. React.memo is a higher-order component that memoizes a functional component. It skips re-rendering if the props have not changed (shallow comparison):
const MemoComp = React.memo(MyComponent); useState returns an array with two elements: the current state value and a setter function.
const [count, setCount] = useState(0);
Calling setCount(count + 1) schedules a re-render with the updated value. Prop drilling is passing props through many intermediate components that don't use them, just to reach a deeply nested child. Solutions:

Context API
State management libraries (Redux, Zustand)
Component composition

Question 35 React Framework

What is lazy loading in React?

<React.StrictMode> is a development-only wrapper that activates additional checks and warnings:

Detects unsafe lifecycle methods
Warns about deprecated APIs
Double-invokes certain functions to detect side effects

It has no effect in production. Create a ref and attach it to a JSX element via the ref attribute:
const inputRef = useRef(null);
<input ref={inputRef} />
Then access it: inputRef.current.focus(); Lazy loading defers loading a component until it is needed, reducing the initial bundle size:
const LazyComp = React.lazy(() => import('./MyComp'));
Wrap it in <Suspense fallback={<Spinner />}> to show a fallback while loading. State updates are batched for performance. React groups multiple setState calls into a single re-render to avoid unnecessary DOM updates. This means you cannot rely on reading the new state value immediately after calling the setter.

Question 36 React Framework

What does useState return and how do you update state?

useLayoutEffect fires synchronously after DOM mutations but before the browser paints. Use it when you need to read layout from the DOM and re-render synchronously (e.g., measuring element size). Prefer useEffect for most side effects. The key prop helps React identify which items have changed, been added, or removed in a list. It must be unique among siblings. Proper keys enable efficient reconciliation and preserve component state correctly. useRef returns a mutable ref object whose .current property persists across renders without causing re-renders.
Common uses:

Accessing DOM elements directly
Storing mutable values (e.g., timers, previous state)

useState returns [value, setValue]. Update with a new value: setValue(5), or with a functional updater when the new state depends on the old: setValue(prev => prev + 1). The functional form avoids stale state bugs.

Question 37 React Framework

What is a class component in React?

A class component is an ES6 class that extends React.Component and must implement a render() method. It can hold local state and use lifecycle methods:
class App extends React.Component { render() { return <h1>Hello</h1>; } } Pass a callback function as a prop from the parent to the child. The child calls the function with data as an argument:
<Child onSubmit={handleData} />
Inside Child: props.onSubmit(value); const ThemeCtx = React.createContext('light');
Provide it: <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
Consume it: const theme = useContext(ThemeCtx);

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React function components or custom hooks

These rules ensure hooks are called in the same order on every render.

Question 38 React Framework

What are props in React?

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React function components or custom hooks

These rules ensure hooks are called in the same order on every render. An Error Boundary is a class component that catches JavaScript errors in its child component tree during rendering, lifecycle methods, and constructors. It implements static getDerivedStateFromError() and/or componentDidCatch() to display a fallback UI. Pass a callback function as a prop from the parent to the child. The child calls the function with data as an argument:
<Child onSubmit={handleData} />
Inside Child: props.onSubmit(value); Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow data to flow top-down (unidirectional) through the component tree and cannot be modified by the receiving component.

Question 39 React Framework

What are React Fragments?

useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state:
const [state, dispatch] = useReducer(reducer, initialState);
You update state by dispatching actions to the reducer. Fragments let you group multiple elements without adding an extra DOM node.
Syntax: <React.Fragment>...</React.Fragment> or the shorthand <>...</>. The shorthand does not support the key prop. The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

Prop drilling is passing props through many intermediate components that don't use them, just to reach a deeply nested child. Solutions:

Context API
State management libraries (Redux, Zustand)
Component composition

Question 40 React Framework

What are Higher-Order Components (HOCs)?

The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

A HOC is a function that takes a component and returns a new enhanced component:
const Enhanced = withAuth(MyComponent);
HOCs enable cross-cutting concerns like authentication, logging, and theming without modifying the original component. useEffect lets you perform side effects in functional components (data fetching, subscriptions, DOM manipulation). It runs after render.
useEffect(() => { /* effect */ return () => { /* cleanup */ }; }, [dependencies]); State is a mutable data object managed within a component that determines how the component renders and behaves. When state changes, React re-renders the component. In functional components, state is managed with the useState hook.

Question 41 React Framework

What is the useRef hook?

useState returns [value, setValue]. Update with a new value: setValue(5), or with a functional updater when the new state depends on the old: setValue(prev => prev + 1). The functional form avoids stale state bugs. useRef returns a mutable ref object whose .current property persists across renders without causing re-renders.
Common uses:

Accessing DOM elements directly
Storing mutable values (e.g., timers, previous state)

Create a ref and attach it to a JSX element via the ref attribute:
const inputRef = useRef(null);
<input ref={inputRef} />
Then access it: inputRef.current.focus(); Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow data to flow top-down (unidirectional) through the component tree and cannot be modified by the receiving component.

Question 42 React Framework

What are the rules of hooks?

Keys give each element a stable identity so React can efficiently track, reorder, add, or remove items during reconciliation. Without proper keys, React may re-render entire lists unnecessarily or produce bugs with component state.

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React function components or custom hooks

These rules ensure hooks are called in the same order on every render. Return a cleanup function from useEffect with an empty dependency array:
useEffect(() => { return () => { // runs on unmount }; }, []); React.memo is a higher-order component that memoizes a functional component. It skips re-rendering if the props have not changed (shallow comparison):
const MemoComp = React.memo(MyComponent);

Question 43 React Framework

How do you handle events in React?

A HOC is a function that takes a component and returns a new enhanced component:
const Enhanced = withAuth(MyComponent);
HOCs enable cross-cutting concerns like authentication, logging, and theming without modifying the original component. Events use camelCase naming and accept a function reference:
<button onClick={handleClick}>Click</button>
React wraps native events in a SyntheticEvent for cross-browser compatibility. Do not call the function: onClick={handleClick()} is wrong. Pass a callback function as a prop from the parent to the child. The child calls the function with data as an argument:
<Child onSubmit={handleData} />
Inside Child: props.onSubmit(value); Create a ref and attach it to a JSX element via the ref attribute:
const inputRef = useRef(null);
<input ref={inputRef} />
Then access it: inputRef.current.focus();

Question 44 React Framework

What is the children prop in React?

props.children contains the content between the opening and closing tags of a component:
<Card><p>Hello</p></Card>
Inside Card, props.children is the <p> element. It enables component composition. Conditional rendering means showing different UI based on conditions. Techniques:

Ternary: {isLoggedIn ? <Dashboard /> : <Login />}
Logical AND: {hasError && <Error />}
Early return inside the component

Props are passed in from a parent and are read-only. State is managed internally by the component and is mutable via setter functions. Both trigger a re-render when they change. Key techniques:

React.memo to avoid unnecessary re-renders
useMemo / useCallback to memoize values and functions
Code splitting with React.lazy and Suspense
Proper key usage in lists
Virtualizing long lists with libraries like react-window

Question 45 React Framework

What is the Context API in React?

The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state:
const [state, dispatch] = useReducer(reducer, initialState);
You update state by dispatching actions to the reducer. <Suspense> lets you display a fallback UI (e.g., a spinner) while waiting for lazy-loaded components or asynchronous data to resolve:
<Suspense fallback={<Loading />}><LazyComponent /></Suspense> A HOC is a function that takes a component and returns a new enhanced component:
const Enhanced = withAuth(MyComponent);
HOCs enable cross-cutting concerns like authentication, logging, and theming without modifying the original component.

Question 46 React Framework

How do you optimize a React application's performance?

useEffect lets you perform side effects in functional components (data fetching, subscriptions, DOM manipulation). It runs after render.
useEffect(() => { /* effect */ return () => { /* cleanup */ }; }, [dependencies]); Fragments let you group multiple elements without adding an extra DOM node.
Syntax: <React.Fragment>...</React.Fragment> or the shorthand <>...</>. The shorthand does not support the key prop. Key techniques:

React.memo to avoid unnecessary re-renders
useMemo / useCallback to memoize values and functions
Code splitting with React.lazy and Suspense
Proper key usage in lists
Virtualizing long lists with libraries like react-window

React.memo is a higher-order component that memoizes a functional component. It skips re-rendering if the props have not changed (shallow comparison):
const MemoComp = React.memo(MyComponent);

Question 47 React Framework

What is React?

The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value

useRef returns a mutable ref object whose .current property persists across renders without causing re-renders.
Common uses:

Accessing DOM elements directly
Storing mutable values (e.g., timers, previous state)

React is a JavaScript library developed by Facebook for building user interfaces. It uses a component-based architecture and a virtual DOM for efficient rendering of dynamic, interactive web applications. useMemo memoizes a computed value: useMemo(() => val, [deps]).
useCallback memoizes a function reference: useCallback(fn, [deps]).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Question 48 React Framework

What is the useMemo hook?

useMemo memoizes a computed value so it is only recalculated when its dependencies change:
const result = useMemo(() => expensiveCalc(a, b), [a, b]);
It helps avoid expensive recalculations on every render. Controlled: Form data is handled by React state; the input value is set via value and updated via onChange.
Uncontrolled: Form data is managed by the DOM itself; you read values with a ref. Controlled components are generally preferred. A HOC is a function that takes a component and returns a new enhanced component:
const Enhanced = withAuth(MyComponent);
HOCs enable cross-cutting concerns like authentication, logging, and theming without modifying the original component. useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state:
const [state, dispatch] = useReducer(reducer, initialState);
You update state by dispatching actions to the reducer.

Question 49 React Framework

What does the dependency array in useEffect do?

React is a JavaScript library developed by Facebook for building user interfaces. It uses a component-based architecture and a virtual DOM for efficient rendering of dynamic, interactive web applications. Reconciliation is the diffing algorithm React uses to compare the previous and new virtual DOM trees. It determines the minimum number of operations needed to update the real DOM, using heuristics like element type comparison and keys. useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state:
const [state, dispatch] = useReducer(reducer, initialState);
You update state by dispatching actions to the reducer. The dependency array controls when the effect runs:

[] — runs only on mount
[a, b] — runs when a or b change
No array — runs after every render

Question 50 React Framework

What is React.Suspense?

<Suspense> lets you display a fallback UI (e.g., a spinner) while waiting for lazy-loaded components or asynchronous data to resolve:
<Suspense fallback={<Loading />}><LazyComponent /></Suspense> Pass an empty dependency array to useEffect:
useEffect(() => { // runs once on mount }, []);
The effect fires after the first render only, mimicking componentDidMount. Controlled: Form data is handled by React state; the input value is set via value and updated via onChange.
Uncontrolled: Form data is managed by the DOM itself; you read values with a ref. Controlled components are generally preferred. The Context API provides a way to share values between components without passing props at every level. It consists of:

React.createContext() — creates a context
Provider — supplies the value
useContext() — consumes the value