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
React · Question Set
React Applied Patterns & Performance interview questions for placements and exams.
Questions
18
Included in this set
Subject
React
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React.
You can style components using CSS modules, styled-components, inline styles, Tailwind, or plain CSS files. CSS modules and styled-components keep styles scoped.
For complete preparation, combine this set with full subject-wise practice for React. You can also explore other subjects and sets from the links below.
HOCs are wrapper functions that add logic or data to a component. They’re useful for features like authentication, theming, or analytics.
StrictMode is a tool that activates extra checks in development. It detects unsafe lifecycle methods, side-effect bugs, and deprecated APIs.
Hooks cover most features like state and lifecycle methods, but error boundaries and getSnapshotBeforeUpdate still require classes.
There are three phases: mounting (render and init), updating (re-render on changes), and unmounting (cleanup). React handles each phase internally.
Use React.memo, useCallback, useMemo to avoid unnecessary renders. Code-split with React.lazy, lazy-load images, and virtualize long lists with react-window.
Pass data from parent to child via props. To send data back up, pass a callback function from the parent and invoke it in the child with new data.
// Parent
<Child onSave={setValue} />
// Child
props.onSave('updated');Simply return JSX markup from a function. For static content, you don’t need state or hooks.
function Table(){ return (<table><tr><td>No data</td></tr></table>); }Hooks use functions and closures for state and lifecycle, while classes use `this.state` and methods. Hooks allow logic reuse and simpler composition.
Wrap components in React.memo, memoize functions and values, and avoid passing new objects or inline functions on every render.
For small apps, Context and Hooks can replace Redux. For large apps with complex state flows and middleware needs, Redux remains better suited.
It runs the development server (using Vite or webpack-dev-server) and auto-reloads on code changes, serving the app at localhost.
Conditional rendering shows components based on state or props conditions using ternaries or logical AND operators.
{isLoggedIn ? <Dashboard/> : <Login/>}Auth-based apps show different UI for logged-in users. Conditional rendering hides private components until the user is authenticated.
Hooks are lightweight and reduce boilerplate, but improper use of effects can cause extra renders. With memoization, they perform equally or better.
Use ES module import syntax and include the component in JSX. Ensure it’s exported from its file with `export default SearchItem`.
import SearchItem from './SearchItem';
function App(){ return <SearchItem/>; }Lifecycle methods manage setup and cleanup during a component’s life. Examples include componentDidMount, componentDidUpdate, and componentWillUnmount. Hooks like useEffect replace these.
React recommends rendering lists using Array.map() because it produces a predictable array of JSX elements.