Back to Subject

Unit 3: Events, States, Component Lifecycle and Hooks - Practice Quiz

INT252 — Web App Development With Reactjs 50 Questions
0 Correct 0 Wrong 50 Left
0/50

1 In React, how are event handlers generally named?

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

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

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

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

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

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 prevents the event object from being passed
C. It changes the scope of 'this'
D. It executes the function when the component renders, not when clicked

5 What is 'State' in a React component?

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

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 defined as a class
B. A functional component that does not manage internal state
C. A component that does not render HTML
D. A component that has no props

8 Why is this.setState() considered asynchronous?

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

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

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

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

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

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

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

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

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

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

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

14 React Hooks were introduced in which version?

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

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

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

16 What does the useState hook return?

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

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(this.state.count + 1)
B. count = count + 1
C. setCount(prevCount => prevCount + 1)
D. setCount(count + 1)

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

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

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

A. Only when the component mounts
B. On every render
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. Never
D. Only on unmount

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

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

23 Which hook is primarily used to avoid prop drilling?

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

24 What argument does useContext accept?

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

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

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

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

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

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

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

28 What are the two arguments accepted by useReducer?

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

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

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

30 Which hook returns a memoized value?

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

31 When should you use useMemo?

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

32 What is a 'Custom Hook'?

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

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 can only be used once per component
B. It must be used inside a loop
C. It merges the new state with the old state automatically
D. It replaces the old state with the new state completely

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

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

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

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

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

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

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

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

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

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

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. componentDidUpdate
B. componentWillUnmount
C. componentDidMount
D. componentWillMount

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. When the user clicks a button
B. Whenever the component re-renders
C. When one of the variables in the dependency array changes
D. Every 1000ms

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. useReducer
B. useContext
C. useCallback
D. useLayoutEffect

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

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

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

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

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

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

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

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

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

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