React.

js Interview Questions

E-Commerce Product Listing Page

Objective: Build a responsive product grid with filters.

Requirements:

- Fetch products from a mock API (e.g., FakeStoreAPI): https://fakestoreapi.com/products

- Display products in a grid with images, title, price, and rating.

- Add filters (by category, price range).

- Add search functionality.

Bonus:

- Add a shopping cart (using Context API or Redux).

- Show product detail modal on click.

Section 1: JavaScript

1. What is the output of the following code?

console.log(2 + "2" - 1);

A) 21 B) "22-1" C) 3 D) "221"

2. Which method is used to create a new array from an existing one without mutating the original?

A) array.push() B) array.splice() C) array.map() D) array.pop()

3. What is the output of typeof [] in JavaScript?

A) "array" B) "object" C) "null" D) "undefined"

4. Which method merges two arrays and returns a new array?

A) array.concat() B) array.push() C) array.join() D) array.slice()

5. What does "use strict" do in JavaScript?

A) Enforces stricter type-checking B) Prevents variable hoisting C) Enables stricter parsing and error handling D) All of

the above

Section 2: React.js

6. What is the correct way to update state in a functional component?

const [count, setCount] = useState(0);

A) count = count + 1 B) setCount(count++) C) setCount(count + 1) D) this.setState({ count: count + 1 })

7. What does JSX stand for?

A) JavaScript XML B) JavaScript Extension C) JS Syntax Extension D) JavaScript Execute

8. Which hook replaces componentDidMount in functional components?

A) useEffect(() => {}, []) B) useState() C) useMemo() D) useCallback()

9. What is the correct way to bind `this` in a class component?

class Button extends React.Component {

handleClick() { console.log("Clicked!"); }

render() {

return <button onClick={______}>Click</button>;

A) this.handleClick B) this.handleClick.bind(this) C) () => this.handleClick() D) Both B & C

10. What does the key prop do in React lists?

A) Improves performance by tracking elements B) Prevents duplicate items C) Encrypts component data D) Sets a

unique ID for CSS

Section 3: Redux

11. What is the purpose of a "reducer" in Redux?

A) To fetch API data B) To mutate the state directly C) To specify how state changes in response to actions D) To

create UI components

12. Which Redux method is used to dispatch an action?

A) store.subscribe() B) store.getState() C) store.dispatch() D) store.replaceReducer()

13. What is the purpose of createSlice in Redux Toolkit?

A) To create React components B) To generate reducers and actions automatically C) To fetch data from APIs D) To

replace useReducer

14. Which middleware is commonly used for async actions in Redux?

A) redux-thunk B) axios C) react-router D) useSWR

Section 4: Advanced React

15. What is the purpose of useMemo?

A) To perform side effects B) To memoize a function C) To optimize performance by memoizing values D) To replace

useState

16. What is React.memo() used for?

A) To memoize props and prevent re-renders B) To replace useMemo C) To manage global state D) To handle routing
 React.js Interview Questions

17. How do you prevent a child component from re-rendering when parent state changes?

A) React.memo() B) useCallback() C) shouldComponentUpdate() D) All of the above

Section 5: React Hooks

18. When should you use useMemo?

A) To fetch API data B) To memoize expensive calculations C) To replace useState D) To create side effects

19. What is wrong with this hook usage?

if (user.isAdmin) {

const [adminData, setAdminData] = useState(null);

A) Hooks cannot be conditional B) useState should be useEffect C) Missing dependency array D) Nothing is wrong

Section 6: Practical Scenarios

20. How would you conditionally render a component in React?

const isLoggedIn = true;

A) {isLoggedIn && <Dashboard />} B) if (isLoggedIn) return <Dashboard /> C) {{isLoggedIn} ? <Dashboard /> : null} D)

<div if={isLoggedIn}><Dashboard /></div>

21. What is the correct way to pass props to a child component?

<ChildComponent _____="Hello" />

A) props B) this.props C) propName (Any custom name) D) value

22. How would you pass data from Child to Parent?

A) Props B) Callback functions C) Context API D) Both B & C

23. What is the output of this code?

const App = () => {

const [count, setCount] = useState(0);

useEffect(() => {

setCount(count + 1);

}, []);

return <div>{count}</div>;

};

A) 0 B) 1 C) Infinite loop D) Error

Section 7: Debugging & Optimization

24. Why might a React component re-render unnecessarily?

A) Incorrect useMemo usage B) State/props changing too often C) Missing key in list items D) All of the above

25. Why might useEffect run infinitely?

A) Missing dependency array B) Incorrect cleanup function C) Mutating state inside useEffect D) All of the above

26. What does the React.StrictMode component do?

A) Enforces TypeScript B) Highlights potential bugs C) Disables hooks D) Replaces Redux

Section 8: Testing & Tools

27. Which tool is used for testing React components?

A) Jest + React Testing Library B) Cypress C) Mocha D) All of the above

Section 9: React Router

28. How do you define a route parameter in React Router v6?

<Route path="/users/:id" element={<UserPage />} />

A) props.match.params.id B) useParams().id C) props.id D) window.location.id

Section 10: CSS-in-JS

29. Which library is used for styling React components?

A) Styled-components B) Tailwind CSS C) Material-UI D) All of the above

Final Tricky Question

30. What is the output?

console.log(!!"false" == !!"true");

A) true B) false C) Error D) undefined