Back to Subject
View Notes

Unit 3 - Practice Quiz

INT252

1 In React, how are event handlers generally named?

A. Lowercase (onclick)
B. CamelCase (onClick)
C. Kebab-case (on-click)
D. PascalCase (OnClick)

2 Which method is used to prevent the default behavior of a form submission in React?

A. return false
B. e.stopPropogation()
C. e.preventDefault()
D. e.cancelBubble = true

3 What is the cross-browser wrapper around the browser's native event that React uses?

A. NativeEvent
B. BrowserEvent
C. SyntheticEvent
D. ReactEvent

4 When passing a function to an event handler in React, why should you generally avoid calling it immediately (e.g., onClick={handleClick()})?

A. It causes a syntax error
B. It executes the function when the component renders, not when clicked
C. It prevents the event object from being passed
D. It changes the scope of 'this'

5 What is 'State' in a React component?

A. External configuration passed from a parent
B. A static object that never changes
C. Internal data storage that is mutable and affects rendering
D. A global store for the entire application

6 Which method is used to update state in a Class Component?

A. this.state = {...}
B. this.updateState(...)
C. this.setState(...)
D. this.changeState(...)

7 What defines a 'Stateless Component' prior to React 16.8?

A. A component that has no props
B. A component defined as a class
C. A functional component that does not manage internal state
D. A component that does not render HTML

8 Why is this.setState() considered asynchronous?

A. It uses Promises internally only
B. React batches state updates for performance gains
C. JavaScript is single-threaded
D. It requires a server call

9 Which lifecycle phase occurs when a component is being created and inserted into the DOM?

A. Updating
B. Unmounting
C. Mounting
D. rendering

10 Which lifecycle method is the best place to make API calls in a Class Component?

A. componentWillMount
B. render
C. componentDidMount
D. constructor

11 Which lifecycle method is called right before a component is removed from the DOM?

A. componentDidUnmount
B. componentWillUnmount
C. componentDidCatch
D. componentWillUpdate

12 Which lifecycle method can be used to optimize performance by preventing unnecessary re-renders?

A. shouldComponentUpdate
B. componentDidUpdate
C. getDerivedStateFromProps
D. render

13 What is the only required method in a React Class Component?

A. constructor
B. componentDidMount
C. render
D. setState

14 React Hooks were introduced in which version?

A. 15.0
B. 16.0
C. 16.8
D. 17.0

15 Which of the following is a 'Rule of Hooks'?

A. Hooks can be called inside loops
B. Hooks can be called inside nested functions
C. Hooks must be called at the top level of a React function
D. Hooks can be called in Class Components

16 What does the useState hook return?

A. The current state value
B. A function to update the state
C. An array containing the current state and an updater function
D. An object containing state and setState

17 What is the correct syntax to initialize a state count to 0 using hooks?

A. const count = useState(0);
B. const [count, setCount] = useState(0);
C. const {count, setCount} = useState(0);
D. useState(count = 0);

18 How do you update state based on the previous state value using the setCount function?

A. setCount(count + 1)
B. setCount(prevCount => prevCount + 1)
C. setCount(this.state.count + 1)
D. count = count + 1

19 Which hook is used to perform side effects like data fetching or DOM manipulation?

A. useState
B. useReducer
C. useEffect
D. useContext

20 If you pass an empty array [] as the second argument to useEffect, when does the effect run?

A. On every render
B. Only when the component mounts
C. Only when the component unmounts
D. Whenever state changes

21 If the dependency array is omitted entirely in useEffect, when does the effect run?

A. Only on mount
B. After every completed render
C. Only on unmount
D. Never

22 What is the purpose of the return function inside a useEffect hook?

A. To return the JSX to be rendered
B. To update the state
C. To cleanup side effects (like clearing timers)
D. To stop the component from rendering

23 Which hook is primarily used to avoid prop drilling?

A. useReducer
B. useCallback
C. useContext
D. useRef

24 What argument does useContext accept?

A. A string key
B. The initial state
C. A Context object (created by React.createContext)
D. A reducer function

25 Which hook allows you to access a DOM element directly?

A. useState
B. useEffect
C. useRef
D. useDom

26 Does changing the .current property of a useRef object trigger a re-render?

A. Yes, always
B. No
C. Only if dependencies change
D. Only in strict mode

27 Which hook is preferable for complex state logic that involves multiple sub-values?

A. useState
B. useReducer
C. useEffect
D. useMemo

28 What are the two arguments accepted by useReducer?

A. reducer function and initial state
B. initial state and dispatch
C. callback and dependency array
D. reducer function and dependency array

29 Which hook returns a memoized version of a callback function?

A. useMemo
B. useCallback
C. useEffect
D. useRef

30 Which hook returns a memoized value?

A. useCallback
B. useMemo
C. useState
D. useReducer

31 When should you use useMemo?

A. For every calculation
B. To cache expensive calculations
C. To handle HTTP requests
D. To update the DOM

32 What is a 'Custom Hook'?

A. A built-in React hook modified by the user
B. A JavaScript function whose name starts with 'use' and may call other hooks
C. A class component converted to a function
D. A component that returns JSX

33 In the Class Component lifecycle, getSnapshotBeforeUpdate is called:

A. After render but before updates are committed to the DOM
B. Before render
C. After componentDidUpdate
D. During the mounting phase

34 Which of the following statements about useState is TRUE?

A. It merges the new state with the old state automatically
B. It replaces the old state with the new state completely
C. It can only be used once per component
D. It must be used inside a loop

35 If you want to persist a value across renders without causing a re-render, which hook should you use?

A. useState
B. useMemo
C. useRef
D. useCallback

36 Can hooks be used inside conditional statements (if/else)?

A. Yes, always
B. No, never
C. Only useEffect
D. Only in development mode

37 In a reducer function used with useReducer, what is the return value?

A. The action object
B. The previous state
C. The new state
D. A boolean indicating success

38 Which hook is equivalent to componentDidMount, componentDidUpdate, and componentWillUnmount combined?

A. useState
B. useEffect
C. useLayoutEffect
D. useLifecycle

39 How do you access the value stored in a ref object named 'inputRef'?

A. inputRef.value
B. inputRef.current
C. inputRef.get()
D. inputRef.state

40 What happens if you update a state hook with the exact same value as the current state?

A. React triggers a re-render anyway
B. React throws an error
C. React bails out without rendering the children or firing effects
D. The component unmounts

41 Which lifecycle method is deprecated in recent React versions (16.3+)?

A. componentDidMount
B. componentWillMount
C. componentDidUpdate
D. componentWillUnmount

42 What is the primary use of the 'key' prop in lists which relates to component lifecycle/state?

A. Styling the list items
B. Helping React identify which items have changed, added, or removed
C. Passing data to the child
D. Setting the initial state

43 When using useMemo, what determines when the value is recalculated?

A. Every 1000ms
B. Whenever the component re-renders
C. When one of the variables in the dependency array changes
D. When the user clicks a button

44 What is 'Prop Drilling'?

A. A tool to inspect props
B. The process of passing data from a parent to a deeply nested child through intermediate components
C. Defining default props
D. Validating props types

45 Which hook serves as an alternative to useState for managing complex state transitions?

A. useContext
B. useReducer
C. useCallback
D. useLayoutEffect

46 Can you use built-in hooks inside a Custom Hook?

A. Yes
B. No
C. Only useState
D. Only useEffect

47 What is the signature of the dispatch function returned by useReducer?

A. dispatch(newState)
B. dispatch(action)
C. dispatch(reducer)
D. dispatch(state, action)

48 Which hook fires synchronously after all DOM mutations but before the browser paints?

A. useEffect
B. useLayoutEffect
C. useState
D. useInsertionEffect

49 In a class component, where should you initialize state?

A. In the render method
B. In componentDidMount
C. In the constructor
D. In componentWillUnmount

50 What is the naming convention for a custom hook file?

A. Must allow uppercase
B. Must start with 'use' (e.g., useForm)
C. Must end with 'Hook'
D. Must be in the hooks folder