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. Lowercase (onclick)
B. PascalCase (OnClick)
C. CamelCase (onClick)
D. Kebab-case (on-click)

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

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

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

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

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

5 What is 'State' in a React component?

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

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

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

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 component that does not render HTML
D. A functional component that does not manage internal state

8 Why is this.setState() considered asynchronous?

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

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

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

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

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

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

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

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

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

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

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

14 React Hooks were introduced in which version?

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

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

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

16 What does the useState hook return?

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

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

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

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

A. count = count + 1
B. setCount(this.state.count + 1)
C. setCount(count + 1)
D. setCount(prevCount => prevCount + 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. Only when the component unmounts
C. On every render
D. Whenever state changes

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

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

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

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

23 Which hook is primarily used to avoid prop drilling?

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

24 What argument does useContext accept?

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

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

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

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. useMemo
D. useEffect

28 What are the two arguments accepted by useReducer?

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

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. useState
B. useReducer
C. useMemo
D. useCallback

31 When should you use useMemo?

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

32 What is a 'Custom Hook'?

A. A class component converted to a function
B. A JavaScript function whose name starts with 'use' and may call other hooks
C. A component that returns JSX
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. During the mounting phase
C. Before render
D. After componentDidUpdate

34 Which of the following statements about useState is TRUE?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44 What is 'Prop Drilling'?

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

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

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

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

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

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

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

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

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

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

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

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
Previous MCQ
Unit 2
Next MCQ
Unit 4