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 · Complete Question Bank
Practice the complete collection of React interview questions including theory, coding, MCQs and real interview problems.
Questions
117
Full database
Topics
32
Categorised
Difficulty
Mixed Levels
Easy Hard
Scroll through every important React question asked in real interviews. Includes MCQs, subjective questions, and coding prompts.
Browse more React questions, explore related subjects, or practice full interview sets to strengthen your preparation.
const element = <h1>Hello, React!</h1>;
// Compiles to: React.createElement('h1', null, 'Hello, React!');const element = React.createElement('h1', null, 'Hello React without JSX');const list = items.map(item => <li key={item.id}>{item.name}</li>);function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}ReactDOM.render(<App />, document.getElementById('root'));Correct Answer: User interface
Correct Answer: Unique among siblings
Correct Answer: render
Correct Answer: Component-based JavaScript library
// Functional Component
function Welcome() {
return <h1>Hello!</h1>;
}
// Class Component
class Welcome extends React.Component {
render() {
return <h1>Hello!</h1>;
}
}// Functional
function Hello(props) { return <p>{props.name}</p>; }
// Class
class Hello extends React.Component { render() { return <p>{this.props.name}</p>; } }// Functional
const [count, setCount] = useState(0);
// Class
this.state = { count: 0 };
this.setState({ count: this.state.count + 1 });const [name, setName] = useState('Guest');
setName('John'); // updates state and re-renders component// Controlled
<input value={text} onChange={(e) => setText(e.target.value)} />
// Uncontrolled
<input ref={inputRef} />const inputRef = useRef();
const handleSubmit = () => {
alert(inputRef.current.value);
};this.setState({ count: this.state.count + 1 });useEffect(() => {
const timer = setInterval(() => console.log('tick'), 1000);
return () => clearInterval(timer); // cleanup
}, []);Correct Answer: Internal storage of component
Correct Answer: Invoke code after update
Correct Answer: props
useEffect(() => {
console.log('Effect runs after render');
}, []);useEffect(() => {
const timer = setInterval(() => console.log('tick'), 1000);
return () => clearInterval(timer);
}, []);useEffect(() => {
console.log('Runs on count change');
}, [count]);const inputRef = useRef(null);
<input ref={inputRef} />;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;
}Correct Answer: useEffect
Correct Answer: useState
Correct Answer: Hooks must be inside React components or custom hooks
const ThemeContext = React.createContext('light');
<ThemeContext.Provider value='dark'><App/></ThemeContext.Provider>;function withLogger(Wrapped) {
return function(props) {
console.log('Props:', props);
return <Wrapped {...props} />;
};
}<DataProvider render={(data) => <List items={data} />} />;class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
componentDidCatch(error, info) { console.log(error, info); }
render() { return this.state.hasError ? <h3>Error!</h3> : this.props.children; }
}<> <h1>Title</h1> <p>Content</p> </>
ReactDOM.createPortal(<Modal />, document.getElementById('portal-root'));const MemoComp = React.memo(MyComponent); const memoValue = useMemo(() => computeExpensive(value), [value]); const memoFn = useCallback(() => handleClick(id), [id]);
if (isLoggedIn) return <Navigate to='/dashboard' />; else return <LoginForm />;
<Navigate to='/home' replace />
<Route path='/user/:id' element={<UserProfile />} />;
const { id } = useParams();const { id } = useParams();
const [query] = useSearchParams();
const sort = query.get('sort');const PrivateRoute = ({ children }) => isAuth ? children : <Navigate to='/login' />;{items.map(item => <li key={item.id}>{item.name}</li>)}const About = React.lazy(() => import('./About'));const Contact = React.lazy(() => import('./Contact'));
<Suspense fallback={<p>Loading...</p>}><Contact /></Suspense>useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData)
.catch(console.error);
}, []);useEffect(() => {
const controller = new AbortController();
fetch('/api', { signal: controller.signal });
return () => controller.abort();
}, []);Correct Answer: npm install -g create-react-app
Correct Answer: All of the above
Correct Answer: Module bundler
npx create-react-app my-app # or npm create vite@latest my-app -- --template react
<div>Hello</div> ➜ React.createElement('div', null, 'Hello')ReactDOM.createRoot(document.getElementById('root')).render(<App />);function Counter(){
const [count,setCount]=useState(0);
useEffect(()=>{document.title=`Count ${count}`;},[count]);
return <button onClick={()=>setCount(count+1)}>Add</button>;
}const [search,setSearch]=useState('');
const filtered=data.filter(i=>i.name.includes(search));function useLocal(key,init){
const [val,setVal]=useState(()=>JSON.parse(localStorage.getItem(key))||init);
useEffect(()=>localStorage.setItem(key,JSON.stringify(val)),[val]);
return [val,setVal];
}useEffect(()=>{axios.get('/api').then(r=>setData(r.data)).catch(e=>setError(e));},[]);if(loading)return <p>Loading...</p>;
if(error)return <p>Error!</p>;
return <DataList data={data}/>;{users.map(u=><UserCard key={u.id} user={u}/>)}Correct Answer: ReactDOM.render()
// Parent
<Child onSave={setValue} />
// Child
props.onSave('updated');function Table(){ return (<table><tr><td>No data</td></tr></table>); }import SearchItem from './SearchItem';
function App(){ return <SearchItem/>; }{isLoggedIn ? <Dashboard/> : <Login/>}Correct Answer: Using Array.map()