CodePark/ questions / Hooks & custom hooks
START PRACTICINGPRACTICE
Frontend question · React › Hooks & custom hooks

FormA and FormB both call useFormInput(''), which wraps useState. The user types in FormA. What happens to FormB?

function useFormInput(initial) {
  const [value, setValue] = useState(initial);
  return { value, onChange: e => setValue(e.target.value) };
}
Nothing; each call to the hook has its own independent state

Nothing happens to FormB. A custom hook is just a function call inside each component. So each component gets its own useState slot. Custom hooks share logic, not state.

"FormB shows the same text" is the tempting wrong answer, because it assumes the state is shared. "FormB re-renders" is also wrong: nothing in FormB changed, so it does not re-render at all. React does not throw either, because many components can use the same hook.