Front End Development Front End Development Frameworks & State Management 2 — Questions and Answers
Question 1: Which React hook is used to perform side effects like data fetching in functional components?
- useState
- useReducer
- useEffect (Correct answer)
- useContext
Correct answer: useEffect
The useEffect hook runs side effects (data fetching, subscriptions, DOM manipulation) after render, optionally cleaning up on unmount.
Question 2: In Vue 3, what replaces the Options API for organizing component logic?
- Template API
- Composition API (Correct answer)
- Directive API
- Mixin API
Correct answer: Composition API
Vue 3's Composition API uses setup() and composable functions to organize component logic by feature rather than option type.
Question 3: What is the purpose of React's useCallback hook?
- Fetches data asynchronously
- Memoizes a callback function to prevent unnecessary re-creation on re-renders (Correct answer)
- Creates a reference to a DOM element
- Manages component lifecycle
Correct answer: Memoizes a callback function to prevent unnecessary re-creation on re-renders
useCallback returns a memoized version of a callback that only changes if its dependencies change, preventing unnecessary child re-renders.
Question 4: In Angular, what decorator is used to define a component?
- @NgModule
- @Injectable
- @Component (Correct answer)
- @Directive
Correct answer: @Component
The @Component decorator marks a class as an Angular component and provides metadata like its template, styles, and selector.
Question 5: What does 'prop drilling' refer to in React applications?
- Optimizing component re-renders
- Passing props through multiple nested components just to reach a deeply nested child (Correct answer)
- Using custom HTML attributes
- Destructuring props in functional components
Correct answer: Passing props through multiple nested components just to reach a deeply nested child
Prop drilling occurs when props must be passed through several intermediate components that don't need them, just to reach a deeply nested component.
Question 6: Which tool is most commonly used to scaffold a new React project with zero configuration?
- Webpack CLI
- Gulp
- Create React App or Vite (Correct answer)
- Babel
Correct answer: Create React App or Vite
Create React App (CRA) and Vite are popular zero-config tools that scaffold a ready-to-use React project with bundling and dev server configured.
Front End Development Front End Development Frameworks & State Management 2
Which React hook is used to perform side effects like data fetching in functional components?