Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Airbnb · React
Practice React questions specifically asked in Airbnb interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
13
Tagged for this company + subject
Company
Airbnb
View company-wise questions
Subject
React
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your Airbnb React round.
HOCs are wrapper functions that add logic or data to a component. They’re useful for features like authentication, theming, or analytics.
For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.
Props are used to pass data from parent components to child components. They make components reusable and customizable.
React component lifecycle includes three phases: Mounting (component created and added to DOM), Updating (re-render due to state/prop changes), and Unmounting (component removed from DOM). Hooks like useEffect can handle these phases in functional components.
Props are external and passed to components; they can’t be modified inside. State is internal data managed within a component using hooks like useState(). Props are for communication, while state is for managing local changes.
Functional components are lightweight and rely on Hooks for state and lifecycle. Class components use the render() method, have access to lifecycle methods, and use this.state. Hooks made functional components capable of everything classes can do with less code.
The useEffect hook accepts a function and an optional dependency array. The effect runs when one of the dependencies changes. An empty array runs it only once after mount.
useEffect(() => {
console.log('Runs on count change');
}, [count]);Context API provides a Provider and Consumer pattern that lets you store and access global data. Components can subscribe to context updates directly, avoiding prop drilling.
Render props is a technique for sharing logic using a prop whose value is a function. The function returns UI based on data passed to it.
<DataProvider render={(data) => <List items={data} />} />;Dynamic routes let you match variable segments in URLs, such as user IDs or product IDs. They are defined using a colon prefix like ':id', and React Router provides these values via the useParams() hook.
<Route path='/user/:id' element={<UserProfile />} />;
const { id } = useParams();Fetch and Axios are used for HTTP requests. React Query helps manage server state with caching, auto refetching, and error handling. Always handle loading and error states during fetch operations.
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData)
.catch(console.error);
}, []);Use three pieces of state: data, loading, and error. Set loading true before fetch, update data on success, and show fallback UI on error.
if(loading)return <p>Loading...</p>;
if(error)return <p>Error!</p>;
return <DataList data={data}/>;React is one of the most popular front-end libraries today. It has a large developer community, strong ecosystem, and is widely used in production by companies like Facebook, Instagram, and Airbnb. Its simple learning curve and reusable components make it ideal for fast-growing projects.
Custom hooks are reusable functions that use React’s built-in hooks. They allow you to extract logic from components and reuse it across multiple components.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}