Quiz for Refs and DOM Manipulation

Q1: What is the purpose of refs in React?

A. A. To access and interact with DOM elements directly B. B. To pass data between components C. C. To manage component state D. D. To handle form submissions

Q2: How do you create a ref in a class component?

A. A. Using React.createRef() B. B. Using useRef() hook C. C. Passing ref as a prop D. D. Using setState()

Q3: How do you create a ref in a functional component?

A. A. Using the useRef() hook B. B. Using React.createRef() C. C. Using componentDidMount() D. D. Using useState()

Q4: What is the value of a ref after it is attached to an input element?

A. A. The DOM node of the input element B. B. The React component instance C. C. The string value of the input D. D. Undefined

Q5: Can refs be used to modify child component state?

A. A. No, refs should not be used to modify state B. B. Yes, always C. C. Only in class components D. D. Only in functional components

Q6: Which attribute is used to attach a ref to a DOM element?

A. A. ref B. B. key C. C. id D. D. className

Q7: Are refs reactive? Do they cause re-render when updated?

A. A. No, updating refs does not trigger re-render B. B. Yes, always C. C. Only if used in useState D. D. Only in class components

Q8: What is an example use case for refs?

A. A. Managing focus or text selection in input fields B. B. Passing data to child components C. C. Styling components D. D. Routing

Q9: Can refs be used with functional components directly?

A. A. No, refs do not work on functional components by default B. B. Yes, always C. C. Only with React.memo D. D. Only with Redux

Q10: How can you pass refs to functional components?

A. A. Using React.forwardRef() B. B. Using useState() C. C. Using context D. D. Using componentDidMount()

Q11: What does React.forwardRef() do?

A. A. It forwards a ref through a component to one of its children B. B. It creates a new ref C. C. It creates a state variable D. D. It binds event handlers

Q12: Which hook would you use to store a mutable value that does not cause re-renders?

A. A. useRef() B. B. useState() C. C. useEffect() D. D. useMemo()

Q13: Can refs be used to trigger animations?

A. A. Yes, by manipulating DOM nodes directly B. B. No, animations require CSS only C. C. Only with Redux D. D. Only in class components

Q14: What should you avoid when using refs?

A. A. Avoid manipulating DOM elements that React controls B. B. Avoid using refs with input fields C. C. Avoid refs in class components D. D. Avoid refs with third-party libraries

Q15: Which is true about callback refs?

A. A. They allow more control by assigning refs via functions B. B. They are deprecated C. C. They cause re-renders D. D. They are only for class components

Q16: How do you clear a ref’s current value?

A. A. Set ref.current = null B. B. Use setState() C. C. Use useEffect() D. D. It cannot be cleared

Q17: Which method do refs bypass?

A. A. React’s state and props system B. B. React hooks C. C. React Router D. D. Redux

Q18: How does useRef differ from useState?

A. A. useRef does not cause re-renders when updated B. B. useRef updates cause re-renders C. C. useRef stores immutable values D. D. useRef triggers effects

Q19: When might refs be necessary?

A. A. To integrate with third-party DOM libraries B. B. For state management C. C. For routing D. D. For styling

Q20: Which of these is NOT a recommended use of refs?

A. A. To read input values for forms instead of controlled components B. B. To manage focus C. C. To trigger animations D. D. To integrate with non-React code