React Interview Questions and Answers
Beginner Level Questions
1. What is
React?
o
React is a JavaScript library for building user
interfaces. It is maintained by Facebook and allows developers to create
reusable UI components.
2. What are
the key features of React?
o
Declarative UI
o
Component-based architecture
o
Virtual DOM
o
One-way data binding
o
High performance
3. What is
JSX?
o
JSX stands for JavaScript XML. It allows you to
write HTML-like syntax in JavaScript, which React then transforms into
JavaScript objects.
4. What is
the Virtual DOM?
o
The Virtual DOM is a lightweight copy of the real
DOM. React uses it to optimize rendering by only updating the changed parts of
the DOM.
5. What are
props in React?
o
Props (short for properties) are used to pass data
from parent components to child components in React.
6. What is
state in React?
o
State is a built-in React object used to manage
data within a component. Unlike props, state is mutable.
7. How do
you create a functional component in React?
function
Greeting() {
return <h1>Hello, World!</h1>;
}
8. What is
the difference between a functional and a class component?
o
Functional components are stateless and simple
functions.
o
Class components are stateful and require a class
declaration, with lifecycle methods and render().
9. What is
the role of key in lists?
o
key helps React identify which elements have
changed, are added, or removed, improving rendering performance.
10.
What are React lifecycle methods?
o
Lifecycle methods are functions that get called at
different stages of a component’s life, such as componentDidMount,
componentDidUpdate, and componentWillUnmount.
11.
What is useState in React?
o
useState is a Hook that allows you to add state to
functional components.
const
[count, setCount] = useState(0);
12.
What is the difference between state and props?
o
state is mutable and managed within the component,
while props are immutable and passed from parent to child.
13.
How do you handle events in React?
o
Events in React are handled using camelCase syntax.
function
handleClick() {
alert('Button clicked!');
}
<button
onClick={handleClick}>Click Me</button>
14.
What are fragments in React?
o
Fragments let you group multiple elements without
adding extra nodes to the DOM.
<>
<h1>Title</h1>
<p>Description</p>
</>
15.
What are controlled components in React?
o
Controlled components are form elements controlled
by React state.
function
Form() {
const [value, setValue] = useState('');
return <input value={value}
onChange={(e) => setValue(e.target.value)} />;
}
16.
What are uncontrolled components?
o
Uncontrolled components use references to access
form data directly without state.
17.
What is the difference between React.createElement
and JSX?
o
React.createElement creates React elements
manually, while JSX is a syntax sugar that compiles to React.createElement.
18.
What is one-way data binding?
o
Data flows in a single direction, from parent to
child components, ensuring a predictable state flow.
19.
What is render() in React?
o
The render() method in class components returns the
JSX to be displayed.
20.
What are higher-order components (HOCs)?
o
HOCs are functions that take a component and return
a new component with enhanced functionality.
Intermediate Level Questions
21.
What are React Hooks?
o
Hooks are functions that let you use state and
other React features in functional components.
22.
What is useEffect used for?
o
useEffect is used for managing side effects in
functional components (e.g., data fetching, subscriptions).
23.
What is the Context API?
o
The Context API is used to share data across
components without passing props manually at every level.
24.
How do you create a context in React?
const
MyContext = React.createContext();
function App() {
return (
<MyContext.Provider
value="Hello">
<Child />
</MyContext.Provider>
);
}
25.
What is Prop Drilling, and how do you avoid it?
o
Prop Drilling occurs when props are passed through
multiple layers. It can be avoided using Context API or state management
libraries like Redux.
26.
What is Redux?
o
Redux is a state management library that helps
manage the global state of an application.
27.
What is the difference between useMemo and
useCallback?
o
useMemo memoizes the return value of a function.
o
useCallback memoizes the function itself.
28.
What are lazy loading and code splitting?
o
Lazy loading loads components or resources
on-demand.
o
Code splitting breaks a large bundle into smaller
chunks for performance optimization.
29.
What is React Router?
o
React Router is a library for routing in React
applications, allowing navigation between views without page refreshes.
30.
How does React.memo work?
o
React.memo prevents unnecessary re-renders by
memoizing functional components.
31.
How can you improve the performance of a React
application?
o
Use React.memo
o
Implement lazy loading
o
Optimize dependencies in useEffect
o
Use virtualization for large lists
o
Split code dynamically
32.
What is a Pure Component in React?
o
A Pure Component implements the
shouldComponentUpdate lifecycle method to prevent unnecessary renders.
33.
What are render props in React?
o
Render props are used to share functionality
between components using a prop that is a function.
function
MouseTracker(props) {
return props.render({ x: 10, y: 20 });
}
34.
How do you handle errors in a React application?
o
Use error boundaries
o
Use try-catch for specific operations
35.
What is reconciliation in React?
o
Reconciliation is the process React uses to update
the DOM by comparing the Virtual DOM with the real DOM.
36.
What is the role of keys in React lists?
o
Keys help React identify which items have changed,
been added, or removed.
37.
What is the purpose of useContext?
o
useContext allows components to access context
values directly without using Consumer components.
38.
What is the difference between useLayoutEffect and
useEffect?
o
useLayoutEffect fires synchronously after all DOM
mutations.
o
useEffect fires asynchronously.
39.
How do you manage forms in React?
o
Controlled components
o
Uncontrolled components
o
Libraries like Formik or React Hook Form
40.
What are custom hooks in React?
o
Custom hooks are functions that reuse stateful
logic across components.
Beginner Level
Q1: What is React?
A: React is a
JavaScript library for building user interfaces, primarily for single-page
applications, allowing developers to create reusable UI components.
Q2: What are components in React?
A: Components are the
building blocks of a React application. They are reusable pieces of code that
return a React element to be rendered to the page.
Q3: What is JSX?
A: JSX (JavaScript XML)
is a syntax extension for JavaScript that looks similar to XML or HTML. It
allows you to write HTML elements in JavaScript and place them in the DOM.
Q4: How do you create a
functional component in React?
A: A functional component can be created using a JavaScript function that returns JSX. Example:
function MyComponent()
{
return <h1>Hello, World!</h1>;
}
Q5: What is the difference between a class component and a functional component?
A: Class components are
ES6 classes that extend from React.Component and can hold state and lifecycle
methods. Functional components are simpler and can use hooks for state and
lifecycle features.
Q: What is state in
React?
A: State is a built-in object that allows components to create and manage their own data. It can change over time, usually in response to user actions.
Q: How do you manage
state in a functional component?
A: You can manage state in a functional component using the useState hook. Example:
const [count, setCount] = useState(0);
Q: What is props in React?
A: Props (short for
properties) are read-only attributes passed from a parent component to a child
component, allowing data to flow through the component tree.
Q: How do you pass
props to a component?
A: You can pass props to a component by adding attributes to the component tag.
Example:
<MyComponent name="John" />
Q: What is the purpose
of the key prop in React?
A: The key prop is used to uniquely identify elements in a list. It helps React optimize rendering by tracking which items have changed, been added, or removed.
Intermediate Level
Q: What are hooks in
React?
A: Hooks are functions that let you use state and other React features in functional components. Examples include useState, useEffect, and useContext.
Q: What does the
useEffect hook do?
A: The useEffect hook allows you to perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.
Q: How do you handle
events in React?
A: You can handle events in React by passing an event handler function to the event attribute. Example:
<button
onClick={handleClick}>Click me</button>
Q: What is the context
API in React?
A: The Context API is a way to share values (like state) between components without having to pass props down manually at every level.
Q: How do you create a
context?
A: You can create a context using React.createContext(). Example:
const MyContext =
React.createContext();
Q: What is the purpose
of useReducer?
A: The useReducer hook is used for managing complex state logic in functional components, similar to Redux. It allows you to manage state transitions based on actions.
Q: How do you
conditionally render components in React?
A: You can conditionally render components using JavaScript expressions, such as the ternary operator or logical AND (&&). Example:
{isLoggedIn ?
<Dashboard /> : <Login />}
Q: What is the
difference between controlled and uncontrolled components?
A: Controlled components are form elements whose value is controlled by React state, while uncontrolled components store their own state internally and are accessed via refs.
Q: How do you create a
ref in React?
A: You can create a ref using the useRef hook. Example:
const inputRef =
useRef(null);
Q: What is the purpose
of React.memo?
A: React.memo is a higher-order component that optimizes functional components by memoizing their output. It prevents unnecessary re-renders when the props have not changed.
Advanced Level
Q: What is the
difference between useMemo and useCallback?
A: useMemo is used to memoize the result of a computation, while useCallback is used to memoize a function definition. Both help optimize performance by preventing unnecessary recalculations.
Q: How do you implement
error boundaries in React?
A: Error boundaries are implemented using class components that define a componentDidCatch lifecycle method. They catch JavaScript errors in their child component tree and display a fallback UI.
Q: What is server-side
rendering (SSR) in React?
A: Server-side rendering is the process of rendering a React application on the server and sending the fully rendered page to the client, improving performance and SEO.
Q: What is the purpose
of React.lazy and Suspense?
A: React.lazy allows you to dynamically import components, while Suspense is used to wrap lazy-loaded components and provide a fallback UI while the component is loading.
Q: How do you optimize
performance in a React application?
A: Performance can be optimized by using techniques such as code splitting, memoization, avoiding inline functions in render, and using the React.PureComponent or React.memo.
Q: What is the role of
Redux in a React application?
A: Redux is a state management library that helps manage application state in a predictable way, allowing for a centralized store and unidirectional data flow.
Q: How do you connect a
React component to a Redux store?
A: You can connect a React component to a Redux store using the connect function from react-redux, which maps state and dispatch to the component's props.
Q: What are
higher-order components (HOCs)?
A: Higher-order components are functions that take a component and return a new component, allowing for code reuse and the ability to add additional functionality to existing components.
Q: What is the purpose
of the useLayoutEffect hook?
A: The useLayoutEffect hook is similar to useEffect, but it runs synchronously after all DOM mutations. It is useful for reading layout from the DOM and synchronously re-rendering.
Q: How do you handle
forms in React?
A: Forms in React can be handled using controlled components, where form inputs are bound to state, or uncontrolled components, where refs are used to access input values directly.
Q: What is the purpose of useImperativeHandle?
A: The
useImperativeHandle hook customizes the instance value that is exposed when
using ref in parent components, allowing you to control what is accessible.
Q: How do you implement routing in a React application?
A: Routing in a React application can be implemented using the react-router-dom library, which provides components like BrowserRouter, Route, and Link for navigation.
Q: What is the
difference between useEffect and useLayoutEffect?
A: useEffect runs asynchronously after the render is committed to the screen, while useLayoutEffect runs synchronously after all DOM mutations, allowing for layout calculations before the browser paints.
Q: How do you perform
API calls in React?
A: API calls in React can be performed using the fetch API or libraries like axios within the useEffect hook to handle side effects.
Q: What is the purpose
of React.Fragment?
A: React.Fragment is used to group multiple elements without adding extra nodes to the DOM, allowing for cleaner markup.
Q: How do you handle
asynchronous operations in React?
A: Asynchronous operations can be handled using async/await syntax within the useEffect hook or by using promises in event handlers.
Q: What is the purpose
of useContext?
A: The useContext hook allows you to access the value of a context directly in functional components, simplifying the consumption of context data.
Q: How do you implement
lazy loading of images in React?
A: Lazy loading of images can be implemented using the loading="lazy" attribute in the <img> tag or by using libraries like react-lazyload.
Q: What is the purpose
of React.StrictMode?
A: React.StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants.
Q: How do you create a
custom hook in React?
A: A custom hook can be created by defining a function that uses React hooks and returns values or functions. Example:
function useFetch(url)
{
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]);
return data;
}
Q: What is the purpose
of React.StrictMode?
A: React.StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants.
Q: How do you handle
side effects in React?
A: Side effects in React can be handled using the useEffect hook, which allows you to perform operations like data fetching, subscriptions, or manually changing the DOM.
Q: What is the purpose
of useDebugValue?
A: The useDebugValue hook is used to display a label for custom hooks in React DevTools, helping developers understand the state of the hook during debugging.
Q: How do you implement
pagination in a React application?
A: Pagination can be implemented by managing the current page state and slicing the data array based on the current page and items per page.
Q: What is the purpose
of React.forwardRef?
A: React.forwardRef is a function that allows you to forward refs to a child component, enabling parent components to directly interact with the child’s DOM node.
Q: How do you optimize
rendering performance in a large list?
A: Rendering performance in a large list can be optimized using techniques like windowing or virtualization with libraries like react-window or react-virtualized.
Q: What is the purpose
of useTransition?
A: The useTransition hook is used to mark updates as non-urgent, allowing React to keep the UI responsive while transitioning between states.
Q: How do you implement
a modal in React?
A: A modal can be implemented by conditionally rendering a component that overlays the main content, often using state to control its visibility.
Q: What is the purpose
of useDeferredValue?
A: The useDeferredValue hook allows you to defer updating a value until the browser is able to render it, helping to keep the UI responsive during heavy updates.
Q: How do you create a
responsive layout in React?
A: A responsive layout can be created using CSS media queries, Flexbox, or CSS Grid, and can be enhanced with libraries like styled-components or react-bootstrap.
Q: What is the purpose
of React.lazy?
A: React.lazy allows you to dynamically import components, enabling code splitting and reducing the initial load time of your application.
Q: How do you handle
authentication in a React application?
A: Authentication can be handled using context or state management libraries to store user information, along with protected routes to restrict access to certain components.
Q: What is the purpose
of useEffect cleanup function?
A: The cleanup function in useEffect is used to clean up side effects, such as unsubscribing from a service or clearing timers, to prevent memory leaks.
Q: How do you implement
drag-and-drop functionality in React?
A: Drag-and-drop functionality can be implemented using the HTML5 Drag and Drop API or libraries like react-beautiful-dnd or react-dnd.
Q: What is the purpose
of useMemo?
A: The useMemo hook is used to memoize expensive calculations, preventing them from being recalculated on every render unless their dependencies change.
Q: How do you create a
responsive navigation menu in React?
A: A responsive navigation menu can be created using CSS for styling and media queries, along with state management to toggle visibility on smaller screens.
Q: What is the purpose
of useCallback?
A: The useCallback hook is used to memoize callback functions, preventing them from being recreated on every render unless their dependencies change.
Q: How do you implement
a search feature in a React application?
A: A search feature can be implemented by managing search input state and filtering the displayed data based on the input value.
Q: What is the purpose
of React.StrictMode?
A: React.StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants.
Q: How do you handle
file uploads in React?
A: File uploads can be handled using an <input type="file"> element, managing the file state, and sending the file to a server using fetch or axios.
Q: What is the purpose
of useId?
A: The useId hook generates unique IDs for accessibility purposes, ensuring that IDs are consistent across server and client renders.
Q: How do you implement
internationalization (i18n) in a React application?
A: Internationalization can be implemented using libraries like react-i18next or react-intl, which provide tools for translating text and managing locale.
Q: What is the purpose
of React.PureComponent?
A: React.PureComponent is a base class for components that only re-render when their props or state change, providing a performance optimization over regular components.
Q: How do you implement
a tooltip in React?
A: A tooltip can be implemented using a combination of state to control visibility and CSS for styling, or by using libraries like react-tooltip.
Q: What is the purpose
of useSyncExternalStore?
A: The useSyncExternalStore hook is used to subscribe to external stores and ensure that the component re-renders when the store changes.
Q: How do you implement
a carousel in React?
A: A carousel can be implemented by managing the current slide state and conditionally rendering slides based on that state, often enhanced with CSS transitions.
Q: What is the purpose
of useInsertionEffect?
A: The useInsertionEffect hook is used to inject styles into the DOM before the browser paints, ensuring that styles are applied immediately.
Q: How do you implement
a countdown timer in React?
A: A countdown timer can be implemented using setInterval within useEffect to update the state at regular intervals until the countdown reaches zero.
Q: What is the purpose
of React.createContext?
A: React.createContext is used to create a context object that can be used to share values between components without passing props through every level of the tree.
70 . Q: How do you implement a sticky header in React?
A: A sticky header can be implemented
using CSS position: sticky or by managing the scroll position in a component
and applying styles conditionally.
Q: What is the purpose of useEffect dependencies?
A: Dependencies in useEffect determine when the effect should run. If any value in the dependency array changes, the effect will re-run.
Q: How do you create a
loading spinner in React?
A: A loading spinner can be created using a conditional rendering approach based on a loading state, often styled with CSS animations.
Q: What is the purpose
of React.Fragment?
A: React.Fragment allows you to group multiple elements without adding extra nodes to the DOM, which helps keep the markup clean.
Q: How do you implement
a search filter in a list?
A: A search filter can be implemented by managing the search input state and filtering the list based on the input value using the filter method.
Q: What is the purpose
of useReducer?
A: The useReducer hook is used for managing complex state logic in functional components, providing a way to handle state transitions based on actions.
Q: How do you create a
responsive grid layout in React?
A: A responsive grid layout can be created using CSS Grid or Flexbox, along with media queries to adjust the layout based on screen size.
Q: What is the purpose
of useMemo?
A: The useMemo hook is used to memoize the result of a computation, preventing it from being recalculated on every render unless its dependencies change.
Q: How do you implement
a notification system in React?
A: A notification system can be implemented using state to manage notifications and conditionally rendering them based on the state.
Q: What is the purpose
of useCallback?
A: The useCallback hook is used to memoize callback functions, preventing them from being recreated on every render unless their dependencies change.
Q: How do you implement
a form validation in React?
A: Form validation can be implemented by managing form input state and using conditional logic to check for errors before submission.
Q: What is the purpose
of React.StrictMode?
A: React.StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants.
Q: How do you create a
custom input component in React?
A: A custom input component can be created by defining a functional component that accepts props and renders an <input> element with the desired attributes.
Q: What is the purpose
of useLayoutEffect?
A: The useLayoutEffect hook runs synchronously after all DOM mutations, allowing you to read layout from the DOM and synchronously re-render.
Q: How do you implement
a breadcrumb navigation in React?
A: Breadcrumb navigation can be implemented by managing the current path state and rendering a list of links based on the path segments.
Q: What is the purpose
of useImperativeHandle?
A: The useImperativeHandle hook customizes the instance value that is exposed when using ref in parent components, allowing you to control what is accessible.
Q: How do you implement
a tabbed interface in React?
A: A tabbed interface can be implemented by managing the active tab state and conditionally rendering content based on the selected tab.
Q: What is the purpose
of useTransition?
A: The useTransition hook is used to mark updates as non-urgent, allowing React to keep the UI responsive while transitioning between states.
Q: How do you create a
responsive footer in React?
A: A responsive footer can be created using CSS Flexbox or Grid, along with media queries to adjust the layout based on screen size.
Q: What is the purpose
of useDeferredValue?
A: The useDeferredValue hook allows you to defer updating a value until the browser is able to render it, helping to keep the UI responsive during heavy updates.
Q: How do you implement
a multi-step form in React?
A: A multi-step form can be implemented by managing the current step state and conditionally rendering form components based on the current step.
Q: What is the purpose
of useSyncExternalStore?
A: The useSyncExternalStore hook is used to subscribe to external stores and ensure that the component re-renders when the store changes.
Q: How do you implement
a color picker in React?
A: A color picker can be implemented using an <input type="color"> element, managing the selected color state, and applying it to elements as needed.
Q: What is the purpose
of React.memo?
A: React.memo is a higher-order component that optimizes functional components by memoizing their output, preventing unnecessary re-renders when props have not changed.
Q: How do you create a
custom hook for form handling?
A: A custom hook for form handling can be created by defining a function that manages form state and validation logic, returning the state and handlers. Example:
function
useForm(initialValues) {
const [values, setValues] =
useState(initialValues);
const handleChange = (e) => {
setValues({ ...values, [e.target.name]:
e.target.value });
};
return [values, handleChange];
}
Q: What is the purpose
of useDebugValue?
A: The useDebugValue hook is used to display a label for custom hooks in React DevTools, helping developers understand the state of the hook during debugging.
Q: How do you implement
a loading state in a React application?
A: A loading state can be implemented by managing a loading boolean state and conditionally rendering a loading spinner or message while data is being fetched.
Q: What is the purpose
of React.createRef?
A: React.createRef is used to create a ref that can be attached to React elements, allowing direct access to the DOM node.
Q: How do you implement
a confirmation dialog in React?
A: A confirmation dialog can be implemented using a modal component that displays a message and buttons for confirming or canceling an action.
Q: What is the purpose
of useEffect with an empty dependency array?
A: Using useEffect with an empty dependency array means the effect will only run once after the initial render, similar to componentDidMount.
Q: How do you implement a responsive image gallery in React?
A: A responsive image gallery can be
implemented using CSS Grid or Flexbox to arrange images, along with state
management for handling image clicks or enlargements.
Q: What is the purpose of useRef?
A: The useRef hook is used to create a mutable object that persists for the full lifetime of the component, often used for accessing DOM elements or storing mutable values.
Q: How do you implement a sticky sidebar in React?
A: A sticky sidebar can be implemented using CSS position: sticky or by managing the scroll position and applying styles conditionally based on the scroll position.
Q: What is the purpose of React.forwardRef?
A: React.forwardRef allows you to forward refs to a child component, enabling parent components to directly interact with the child’s DOM node.
Q: How do you create a custom dropdown component in React?
A: A custom dropdown component can be created by managing the open/close state and rendering a list of options based on the state, often styled with CSS.
Q: What is the purpose of useInsertionEffect?
A: The useInsertionEffect hook is used to inject styles into the DOM before the browser paints, ensuring that styles are applied immediately.
Q: How do you implement a date picker in React? - A: A date picker can be implemented using an <input type="date"> element or by using libraries like react-datepicker for more advanced features.
Q: What is the purpose of useTransition?
A: The useTransition hook is used to mark updates as non-urgent, allowing React to keep the UI responsive while transitioning between states.
Q: How do you create a custom tooltip component in React?
A: A custom tooltip component can be created by managing the visibility state and rendering a tooltip element based on the state, often positioned relative to the target element.
Q: What is the purpose of useDeferredValue?
A: The useDeferredValue hook allows you to defer updating a value until the browser is able to render it, helping to keep the UI responsive during heavy updates.
Q: How do you implement a multi-select dropdown in React?
A: A multi-select dropdown can be implemented by managing an array of selected values in state and rendering checkboxes for each option, updating the state on change.
Q: What is the purpose of useSyncExternalStore?
A: The useSyncExternalStore hook is used to subscribe to external stores and ensure that the component re-renders when the store changes.
Q: How do you create a custom modal component in React?
A: A custom modal component can be created by managing the open/close state and rendering the modal content conditionally, often styled with CSS for overlay effects.
Q: What is the purpose of useId?
A: The useId hook generates unique IDs for accessibility purposes, ensuring that IDs are consistent across server and client renders.
Q: How do you implement a file upload progress indicator in React?
A: A file upload progress indicator can be implemented by using the XMLHttpRequest or fetch API with a progress event listener to update the upload progress state.
Q: What is the purpose of React.memo?
A: React.memo is a higher-order component that optimizes functional components by memoizing their output, preventing unnecessary re-renders when props have not changed.
Q: How do you create a custom pagination component in React?
A: A custom pagination component can be created by managing the current page state and rendering page numbers based on the total number of items and items per page.
Q: What is the purpose of useCallback?
A: The useCallback hook is used to memoize callback functions, preventing them from being recreated on every render unless their dependencies change.
Q: How do you implement a search bar with autocomplete in React?
A: A search bar with autocomplete can be implemented by managing the input state and filtering a list of suggestions based on the input value.
Q: What is the purpose of useEffect with cleanup?
A: The cleanup function in useEffect is used to clean up side effects, such as unsubscribing from a service or clearing timers, to prevent memory leaks.
Q: How do you create a custom slider component in React?
A: A custom slider component can be created by managing the slider value in state and rendering a range input element, updating the state on change.
Q: What is the purpose of useLayoutEffect?
A: The useLayoutEffect hook runs synchronously after all DOM mutations, allowing you to read layout from the DOM and synchronously re-render.
Q: How do you implement a confirmation prompt before an action in React?
A: A confirmation prompt can be implemented using a modal that displays a message and buttons for confirming or canceling the action.
Q: What is the purpose of useMemo?
A: The useMemo hook is used to memoize the result of a computation, preventing it from being recalculated on every render unless its dependencies change.
Q: How do you create a custom accordion component in React?
A: A custom accordion component can be created by managing the open/close state of each section and rendering the content conditionally based on that state.
Q: What is the purpose of useDebugValue?
A: The useDebugValue hook is used to display a label for
custom hooks in React DevTools, helping developers understand the state of the
hook during debugging.
Q: How do you implement a responsive sidebar in React?
A: A responsive sidebar can be implemented using CSS for styling and media queries to adjust its visibility based on screen size, often toggled with a button.
Q: What is the purpose of React.createContext?
A: React.createContext is used to create a context object that can be used to share values between components without passing props through every level of the tree.
Q: How do you create a custom breadcrumb component in React?
A: A custom breadcrumb component can be created by managing the current path state and rendering a list of links based on the path segments.
Q: What is the purpose of useTransition?
A: The useTransition hook is used to mark updates as non-urgent, allowing React to keep the UI responsive while transitioning between states.
Q: How do you implement a custom tooltip component in React?
A: A custom tooltip component can be created by managing the visibility state and rendering a tooltip element based on the state, often positioned relative to the target element.
Q: What is the purpose of useDeferredValue?
A: The useDeferredValue hook allows you to defer
updating a value until the browser is able to render it, helping to keep the UI
responsive during heavy updates.
Q: How do you implement a multi-select dropdown in React?
A: A multi-select dropdown can be implemented by managing an array of selected values in state and rendering checkboxes for each option, updating the state on change.
Q: What is the purpose of useSyncExternalStore?
A: The useSyncExternalStore hook is used to subscribe to external stores and ensure that the component re-renders when the store changes.
Q: How do you create a custom modal component in React?
A: A custom modal component can be created
by managing the open/close state and rendering the modal content conditionally,
often styled with CSS for overlay effects.
Q: What is the purpose of useId?
A: The useId hook generates unique IDs for accessibility purposes, ensuring that IDs are consistent across server and client renders.
Q: How do you implement a file upload progress indicator in React?
A: A file upload progress indicator can be implemented by using the XMLHttpRequest or fetch API with a progress event listener to update the upload progress state.
Q: What is the purpose of React.memo?
A: React.memo is a higher-order component that optimizes functional components by memoizing their output, preventing unnecessary re-renders when props have not changed.
Q: How do you create a custom pagination component in React?
A: A custom pagination component can be created by managing the current page state and rendering page numbers based on the total number of items and items per page.
Q: What is the purpose of useCallback?
A: The useCallback hook is used to memoize callback functions, preventing them from being recreated on every render unless their dependencies change.
Q: How do you implement a search bar with autocomplete in React?
A: A search bar with autocomplete can be implemented by managing the input state and filtering a list of suggestions based on the input value.
Q: What is the purpose of useEffect with cleanup?
A: The cleanup function in useEffect is used to clean up side effects, such as unsubscribing from a service or clearing timers, to prevent memory leaks.
Q: How do you create a custom slider component in React?
A: A custom slider component can be created by managing the slider value in state and rendering a range input element, updating the state on change.
Q: What is the purpose of useLayoutEffect?
A: The useLayoutEffect hook runs synchronously after all DOM mutations, allowing you to read layout from the DOM and synchronously re-render.
Q: How do you implement a confirmation prompt before an action in React?
A: A confirmation prompt can be implemented using a modal that displays a message and buttons for confirming or canceling the action.
Q: What is the purpose of useMemo?
A: The useMemo hook is used to memoize the result of a computation, preventing it from being recalculated on every render unless its dependencies change.
Q: How do you create a custom accordion component in React?
A: A custom accordion component can be created by managing the open/close state of each section and rendering the content conditionally based on that state.
Q: What is the purpose of useDebugValue?
A: The useDebugValue hook is used to display a label for custom hooks in React DevTools, helping developers understand the state of the hook during debugging.
Q: How do you implement a responsive sidebar in React?
A: A responsive sidebar can be implemented using CSS for styling and media queries to adjust its visibility based on screen size, often toggled with a button.
Q: What is the purpose of React.createContext?
A: React.createContext is used to create a context object that can be used to share values between components without passing props through every level of the tree.
Q: How do you create a custom breadcrumb component in React?
A: A custom breadcrumb component can be created by managing the current path state and rendering a list of links based on the path segments.
Q: What is the purpose of useTransition?
A: The useTransition hook is used to mark updates as non-urgent, allowing React to keep the UI responsive while transitioning between states.
Q: How do you implement a custom tooltip component in React?
A: A custom tooltip component can be created by managing the visibility state and rendering a tooltip element based on the state, often positioned relative to the target element.
Q: What is the purpose of useDeferredValue?
A: The useDeferredValue hook allows you to defer updating a value until the browser is able to render it, helping to keep the UI responsive during heavy updates.
Q: How do you implement a multi-select dropdown in React?
A: A multi-select dropdown can be implemented by managing an array of selected values in state and rendering checkboxes for each option, updating the state on change.
Q: What is the purpose of useSyncExternalStore?
A: The useSyncExternalStore hook is used to subscribe to external stores and ensure that the component re-renders when the store changes.
Q: How do you create a custom modal component in React?
A: A custom modal component can be created by managing the open/close state and rendering the modal content conditionally, often styled with CSS for overlay effects.
Q: What is the purpose
of useId? - A: The useId hook generates unique IDs for accessibility purposes,
ensuring that IDs are consistent across server and client renders.
Q: How do you implement
a file upload progress indicator in React? - A: A file upload progress
indicator can be implemented by using the XMLHttpRequest or fetch API with a
progress event listener to update the upload progress state.
Q: What is the purpose
of React.memo? - A: React.memo is a higher-order component that optimizes
functional components by memoizing their output, preventing unnecessary
re-renders when props have not changed.
Q: How do you create a
custom pagination component in React? - A: A custom pagination component can be
created by managing the current page state and rendering page numbers based on
the total number of items and items per page.
Q: What is the purpose of
useCallback? - A: The useCallback hook is used to memoize callback functions,
preventing them from being recreated on every render unless their dependencies
change.
Q: How do you implement
a search bar with autocomplete in React? - A: A search bar with autocomplete
can be implemented by managing the input state and filtering a list of
suggestions based on the input value.
Q: What is the purpose
of useEffect with cleanup? - A: The cleanup function in useEffect is used to
clean up side effects, such as unsubscribing from a service or clearing timers,
to prevent memory leaks.
Q: How do you create a
custom slider component in React? - A: A custom slider component can be created
by managing the slider value in state and rendering a range input element, updating
the state on change.
Q: What is the purpose
of useLayoutEffect? - A: The useLayoutEffect hook runs synchronously after all
DOM mutations, allowing you to read layout from the DOM and synchronously
re-render.
Q: How do you implement
a confirmation prompt before an action in React? - A: A confirmation prompt can
be implemented using a modal that displays a message and buttons for confirming
or canceling the action.
Q: What is the purpose
of useMemo? - A: The useMemo hook is used to memoize the result of a
computation, preventing it from being recalculated on every render unless its
dependencies change.
Q: How do you create a
custom accordion component in React? - A: A custom accordion component can be
created by managing the open/close state of each section and rendering the
content conditionally based on that state.
Q: What is the purpose
of useDebugValue? - A: The useDebugValue hook is used to display a label for
custom hooks in React DevTools, helping developers understand the state of the
hook during debugging.
Q: How do you implement
a responsive sidebar in React? - A: A responsive sidebar can be implemented
using CSS for styling and media queries to adjust its visibility based on
screen size, often toggled with a button.
Q: What is the purpose of
React.createContext? - A: React.createContext is used to create a context
object that can be used to share values between components without passing
props through every level of the tree.
Q: How do you create a
custom breadcrumb component in React? - A: A custom breadcrumb component can be
created by managing the current path state and rendering a list of links based
on the path segments.
Q: What is the purpose
of useTransition? - A: The useTransition hook is used to mark updates as
non-urgent, allowing React to keep the UI responsive while transitioning
between states.
Q: How do you implement
a custom tooltip component in React? - A: A custom tooltip component can be
created by managing the visibility state and rendering a tooltip element based
on the state, often positioned relative to the target element.
Q: What is the purpose
of useDeferredValue? - A: The useDeferredValue hook allows you to defer
updating a value until the browser is able to render it, helping to keep the UI
responsive during heavy updates.
Q: How do you implement
a multi-select dropdown in React? - A: A multi-select dropdown can be
implemented by managing an array of selected values in state and rendering
checkboxes for each option, updating the state on change.
Q: What is the purpose
of useSyncExternalStore? - A: The useSyncExternalStore hook is used to
subscribe to external stores and ensure that the component re-renders when the
store changes.
Q: How do you create a
custom modal component in React? - A: A custom modal component can be created
by managing the open/close state and rendering the modal content conditionally,
often styled with CSS for overlay effects.
Q: What is the purpose
of useId? - A: The useId hook generates unique IDs for accessibility purposes,
ensuring that IDs are consistent across server and client renders.
Q: How do you implement
a file upload progress indicator in React? - A: A file upload progress
indicator can be implemented by using the XMLHttpRequest or fetch API with a
progress event listener to update the upload progress state.
Q: What is the purpose
of React.memo? - A: React.memo is a higher-order component that optimizes
functional components by memoizing their output, preventing unnecessary
re-renders when props have not changed.
Q: How do you create a
custom pagination component in React? - A: A custom pagination component can be
created by managing the current page state and rendering page numbers based on
the total number of items and items per page.
Q: What is the purpose
of useCallback? - A: The useCallback hook is used to memoize callback
functions, preventing them from being recreated on every render unless their
dependencies change.
Q: How do you implement
a search bar with autocomplete in React? - A: A search bar with autocomplete
can be implemented by managing the input state and filtering a list of
suggestions based on the input value.
Q: What is the purpose
of useEffect with cleanup? - A: The cleanup function in useEffect is used to
clean up side effects, such as unsubscribing from a service or clearing timers,
to prevent memory leaks.
Q: How do you create a
custom slider component in React? - A: A custom slider component can be created
by managing the slider value in state and rendering a range input element,
updating the state on change.
Q: What is the purpose
of useLayoutEffect? - A: The useLayoutEffect hook runs synchronously after all
DOM mutations, allowing you to read layout from the DOM and synchronously
re-render.
Q: How do you implement
a confirmation prompt before an action in React? - A: A confirmation prompt can
be implemented using a modal that displays a message and buttons for confirming
or canceling the action.
Q: What is the purpose
of useMemo? - A: The useMemo hook is used to memoize the result of a
computation, preventing it from being recalculated on every render unless its
dependencies change.
Q: How do you create a
custom accordion component in React? - A: A custom accordion component can be
created by managing the open/close state of each section and rendering the
content conditionally based on that state.
Q: What is the purpose
of useDebugValue? - A: The useDebugValue hook is used to display a label for
custom hooks in React DevTools, helping developers understand the state of the
hook during debugging.
Q: How do you implement a responsive sidebar in React?
A: A responsive sidebar can be implemented using CSS for styling and media queries to adjust its visibility based on screen size, often toggled with a button.
Q: What is the purpose of React.createContext?
A: React.createContext is used to create a context object that can be used to share values between components without passing props through every level of the tree.
Q: How do you create a custom breadcrumb component in React?
A: A custom breadcrumb component can be created by managing the current path state and rendering a list of links based on the path segments.
Q: What is the purpose of useTransition?
A: The useTransition hook is used to mark updates as non-urgent, allowing React to keep the UI responsive while transitioning between states.
Q: How do you implement a custom tooltip component in React? - A: A custom tooltip component can be created by managing the visibility state and rendering a tooltip element based on the state, often positioned relative to the target element.
Q: What is the purpose of useDeferredValue?
A: The useDeferredValue hook allows you to defer updating a value until the browser is able to render it, helping to keep the UI responsive during heavy updates.
Q: How do you implement a multi-select dropdown in React?
A: A multi-select dropdown can be implemented by managing an array of selected values in state and rendering checkboxes for each option, updating the state on change.
Q: What is the purpose of useSyncExternalStore?
A: The useSyncExternalStore hook is used to
subscribe to external stores and ensure that the component re-renders when the
store changes.
Q: How do you create a custom modal component in React?
A: A custom modal component can be created by managing the open/close state and rendering the modal content conditionally, often styled with CSS for overlay effects.