Tutorials
Courses

Advanced Hooks and Patterns

Here’s a guide to advanced React: use useReducer, useRef, compound components, and render props for efficient state and UI management.

Last Updated :

Discuss

Comments

Question 1

What is the primary use case of useReducer in React?

To handle side effects.
To manage state in a component with complex logic.
To manage props in a component.
To store data in local storage.

Discuss it

Question 2

Which of the following is the correct signature for using useReducer?

const [state, dispatch] = useReducer(reducer)
const [dispatch, state] = useReducer(reducer)
const [state, dispatch] = useReducer(state, action)
const [state, reducer] = useReducer(dispatch)

Discuss it

Question 3

Which of the following is true about useReducer in comparison to useState?

useReducer is more suitable for simple state updates.
useReducer allows for more complex state management than useState.
useReducer is only used for performance optimization.
useReducer should only be used in class components.

Discuss it

Question 4

In useReducer, what is the role of the dispatch function?

To modify the state directly.
To send data to the backend.
To trigger an action that updates the state.
To reset the state to its initial value.

Discuss it

Question 5

What will be the updated state after dispatching { type: 'increment' }?

JavaScript

const initialState = { count: 0 };
function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        default:
            return state;
    }
}
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });

{ count: 0 }
{ count: 1 }
undefined
Error

Discuss it

Question 6

What is the purpose of useRef in React?

To trigger re-renders.
To store mutable values without causing re-renders.
To store the component’s state.
To persist the component’s state after re-render.

Discuss it

Question 7

How do you access a DOM element using useRef in React?

By assigning the ref prop to the element and accessing it via useRef
By using the document.getElementById method
By passing the DOM element to useRef
By assigning useRef directly to the element.

Discuss it

Question 8

Which of the following is the correct way to persist a value with useRef without triggering a re-render?

JavaScript

const myValue = useRef(0);
myValue.current = 10;

This will cause a re-render with the updated value.
useRef cannot store numbers.
The value of myValue will persist across re-renders without causing any render.
The useRef hook is used incorrectly in this case.

Discuss it

Question 9

Which pattern is demonstrated in the following code?

JavaScript

function Mouse({ render }) {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    useEffect(() => {
        const update = (e) => setPosition({ x: e.clientX, y: e.clientY });
        window.addEventListener('mousemove', update);
        return () => window.removeEventListener('mousemove', update);
    }, []);

    return render(position);
}
<Mouse render={(pos) => <div>{`X: ${pos.x}, Y: ${pos.y}`}</div>} />;

Compound component pattern.
Render props pattern.
Incorrect use of React hooks.
Code will cause an error.

Discuss it

Question 10

What is the difference between useRef and useState?

useRef triggers re-renders, while useState does not.
useState persists across renders, while useRef does not.
useState triggers re-renders when the state changes, while useRef does not
useState can only store numbers, while useRef can store any data type.

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion