React Routing and Performance 1 — Questions and Answers
Question 1: What is React Router?
- A hardware component
- A library for handling navigation and URL routing in single-page React applications (Correct answer)
- A state manager
- A build tool
Correct answer: A library for handling navigation and URL routing in single-page React applications
React Router enables navigation between views/pages in a React SPA by mapping URL paths to components without full page reloads.
Question 2: What is lazy loading in React?
- Slow rendering
- Loading components or code only when they are needed rather than all upfront, improving initial load time (Correct answer)
- A debugging mode
- An error state
Correct answer: Loading components or code only when they are needed rather than all upfront, improving initial load time
React.lazy() enables code splitting by loading components dynamically when they are first rendered, reducing the initial bundle size.
Question 3: What is React.memo?
- A note component
- A higher-order component that prevents re-rendering when props have not changed, optimizing performance (Correct answer)
- A memory hook
- A documentation tool
Correct answer: A higher-order component that prevents re-rendering when props have not changed, optimizing performance
React.memo memoizes a component, skipping re-render if its props have not changed. This is useful for expensive-to-render components.
Question 4: What is the useCallback hook?
- A phone call hook
- A hook that memoizes callback functions, preventing their recreation on every render unless dependencies change (Correct answer)
- An event handler
- A promise handler
Correct answer: A hook that memoizes callback functions, preventing their recreation on every render unless dependencies change
useCallback returns a memoized version of a callback that only changes when dependencies change, useful for preventing unnecessary re-renders of child components.
Question 5: What is code splitting?
- Dividing code among team members
- Breaking the application bundle into smaller chunks that load on demand, reducing initial page load time (Correct answer)
- Splitting CSS from JavaScript
- A version control technique
Correct answer: Breaking the application bundle into smaller chunks that load on demand, reducing initial page load time
Code splitting divides the JavaScript bundle into smaller pieces. Only the code needed for the current view loads initially, with other chunks loaded as needed.
Question 6: What is server-side rendering (SSR) in React?
- Running React on a server
- Rendering React components on the server to HTML, sending pre-rendered content to the browser for faster initial load and SEO (Correct answer)
- A caching technique
- A deployment method
Correct answer: Rendering React components on the server to HTML, sending pre-rendered content to the browser for faster initial load and SEO
SSR generates HTML on the server for each request. The browser receives ready-to-display content, improving initial load time and search engine crawlability.
React Routing and Performance 1
What is React Router?