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
Shopify · React
Practice React questions specifically asked in Shopify interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
14
Tagged for this company + subject
Company
Shopify
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 Shopify React round.
Common Hooks include useState for state, useEffect for side effects, useRef for DOM refs, useContext for global context, useMemo and useCallback for optimization.
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.
React is fast thanks to Virtual DOM, SEO-friendly with server-side rendering, easy to learn, allows reusable components, and provides great developer tools. Its component model also promotes clean, maintainable code.
There are three phases: mounting (render and init), updating (re-render on changes), and unmounting (cleanup). React handles each phase internally.
React apps can be optimized by using memoization (React.memo, useMemo, useCallback), code-splitting, lazy loading, virtualization for lists, and avoiding unnecessary re-renders by properly managing dependencies and keys.
You can avoid prop drilling by using React Context API, Redux, Zustand, or custom hooks. These allow you to share data globally without passing props through multiple levels.
In class components, state is managed with this.state and updated using setState(). In functional components, state is handled with the useState() Hook. Both trigger re-renders when the state changes.
// Functional
const [count, setCount] = useState(0);
// Class
this.state = { count: 0 };
this.setState({ count: this.state.count + 1 });Controlled components make React the single source of truth for input values. This gives better control for validation, conditionally disabling inputs, and synchronizing with state.
Create a custom hook when you have reusable logic that involves React Hooks, like fetching data, handling input, or subscribing to events. It keeps your code clean and DRY.
Reconciliation is React’s process of comparing Virtual DOM trees to decide which parts of the UI need to update. Only changed elements are re-rendered, improving performance.
In React Router v6, you can redirect users using the Navigate component after successful login. Once authentication succeeds, set a state like isLoggedIn to true and conditionally render <Navigate to='/dashboard' /> to send the user to the dashboard automatically.
if (isLoggedIn) return <Navigate to='/dashboard' />; else return <LoginForm />;
Use React.lazy() to load components only when needed, wrapped inside a <Suspense> fallback. This helps reduce bundle size and speeds up initial load.
const Contact = React.lazy(() => import('./Contact'));
<Suspense fallback={<p>Loading...</p>}><Contact /></Suspense>For small apps, Context and Hooks can replace Redux. For large apps with complex state flows and middleware needs, Redux remains better suited.
A typical React app contains `src` for code, `public` for static assets, `package.json` for dependencies, `node_modules` for installed packages, and configuration files like `.gitignore` and `README.md`. Inside `src`, you’ll find `index.js` and `App.js` as entry points.
Keep the input value in state and filter a list based on it. Controlled inputs keep the displayed value in sync with React state, enabling instant updates and validation.
const [search,setSearch]=useState('');
const filtered=data.filter(i=>i.name.includes(search));