Resetting Controlled Components in Forms

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

If you're starting to leverage some of React's form primitives (e.g. action / formAction and Server Actions), you might run into the same conundrum I did with controlled components.

By default, React will reset a form after a submission , however that doesn't really do much to components that manage their own state, the state managed by React will be preserved on the form submit.

export function MultiSelect({
  options,
  label,
  name,
  // maybe other props too
}) {
  let [inputValue, setInputValue] = useState("");
  let [selected, setSelected] = useState([]);

  function handleInput(e) {
    setInputValue(e.target.value

// within our `MultiSelect` component
useEffect(() => {
  let controller = new AbortController();

  document.addEventListener(
    'reset',
    () => {
      setInputValue("");
      setSelected([]);
    },
    { signal: controller.signal }
  );
  
  return () => {
    controller

Resetting Controlled Components in Forms

Resetting Controlled Components in Forms

Footnotes:

Tags:

Bluesky Post and Comments:

Resetting Controlled Components in Forms

Related Posts

React

Related Posts

React

Web Development

React Server Components