React Basics

Question 1

What is the primary reason for preferring functional components over class components in React?

Answer 1

Since the introduction of hooks (16.8), functional components can do everything class components can do with simpler syntax and better performance characteristics.

1. Easier to test
2. Less boilerplate
3. more declarative

Question 2

What principle do you follow when breaking down a complex UI into components?

Answer 2

I follow the single responsibility principle.

1. Atomic components (buttons, inputs)
2. Molecules (form groups, card components)
3. Organisms (entire sections like nav bars)
4. Templates (page layouts)
5. Pages (complete views)

Also consider state management needs. Components with shared state might need to be grouped under a common parent or use context.

Question 3

List the types of components used when breaking down a UI.

Answer 3

• Atomic components (buttons, inputs)
• Molecules (form groups, card components)
• Organisms (entire sections like a navigation bar)
• Templates (page layouts)
• Pages (complete views)

Question 4

What are the key principles for managing component state and props?

Answer 4

• Keep state as close as possible to where it’s needed
• Lift state up when it needs to be shared
• Use prop drilling for shallow component trees
• Implement Context API for widely accessed state
• Use Redux for complex global state
• Apply immutability patterns when updating state
• Destructure props for readability
• Use TypeScript to enforce prop types
• Provide default props when appropriate

Question 5

Which hooks are used most frequently in React?

Answer 5

• useState
• useEffect
• useContext
• useCallback
• useMemo
• useRef

Question 6

What does the useEffect hook do?

Answer 6

It runs a callback function after the component renders and re-runs when dependencies change.

Question 7

What is the purpose of the cleanup function in useEffect?

Answer 7

To prevent memory leaks by disposing of resources created in the effect.

Question 8

What strategies can be employed to prevent unnecessary re-renders in React?

Answer 8

• Memoization techniques (React.memo(), useMemo(), useCallback())
• State management optimization (keep state local, use immutable patterns)
• Render optimization (virtualization, code-splitting)
• Use profiling tools (React DevTools Profiler, Lighthouse audits)

Question 9

When should you use useMemo?

Answer 9

When you have computationally expensive calculations that don’t need to be recalculated on every render.

Question 10

What is the function of React.memo?

Answer 10

It optimizes pure components to prevent unnecessary re-renders based on the same props.

Question 11

What is the purpose of the Intersection Observer API in lazy loading?

Answer 11

To load components as they enter the viewport.

Question 12

What is Redux Toolkit (RTK) used for?

Answer 12

To simplify Redux development and reduce boilerplate code.

Question 13

What does the createSlice function do in Redux Toolkit?

Answer 13

It generates actions and reducers, reducing boilerplate.

Question 14

When should you use local component state over Redux?

Answer 14

When the state is only relevant to a single component and doesn’t need to be shared.

Question 15

What is the role of createAsyncThunk in Redux Toolkit?

Answer 15

To handle asynchronous operations like API calls.

Question 16

What are extraReducers used for in Redux Toolkit?

Answer 16

To handle pending, fulfilled, and rejected states for async operations.

Question 17

Fill in the blank: The _______ provides a consistent pattern for loading states and error handling in Redux Toolkit.

Answer 17

RTK Query

Question 18

What are the use cases for Context API in React?

Answer 18

• State accessed by multiple components
• Limited scope (theming, user preferences)
• Changes infrequently
• Small to medium complexity level