Advanced Hooks and Patterns

Last Updated :
Discuss
Comments

Question 1

Which hook is preferred when state logic becomes complex or depends on previous state values?

  • useState

  • useReducer

  • useRef

  • useEffect

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)

Question 3

What does useRef NOT do?

  • Persist values across renders.

  • Directly access DOM elements.

  • Trigger re-renders when updated.

  • Store previous values.

Question 4

In Component Composition, which pattern allows us to build reusable wrapper components?

  • Specialization

  • Containment (children props)

  • Higher-Order Components

  • Render Props

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

Question 6

Which of the following is TRUE about Render Props?

  • They are a replacement for Hooks.

  • They allow passing a function as a prop for dynamic rendering.

  • They always require class components.

  • They cannot be used with state.

Question 7

What happens when this component mounts?

JavaScript 
function Demo() {
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    inputRef.current.value = "Hello React!";
    inputRef.current.focus();
  }, []);

  return <input type="text" ref={inputRef} />;
}


  • The input remains empty and unfocused

  • The input is pre-filled with "Hello React!" but not focused

  • The input is pre-filled with "Hello React!" and focused automatically

  • The code will throw an error

Question 8

What will the following code render?

JavaScript 
function Child({ text }) {
  return <p>{text}</p>;
}

function Parent() {
  return <Child text="Hello Composition!" />;
}


  • Nothing will render

  • It will throw an error: text is undefined

  • It will render <p>Hello Composition!</p>

  • It will render only <Child /> without content

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.

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.

There are 10 questions to complete.

Take a part in the ongoing discussion