title: Deduplicating repetitive code in React stateless functions / components
body: <p>I have quite some stateless React components and all of them contain the same (duplicated) code.</p>
  <p>Example:</p>
  <pre><code>export const Foo = (props) =&gt; {
    const [submitted, setSubmitted] = useState(false);
    const form = useForm({ values: props.settings });
  
    const validated = props.callbacks.validate(form);
    const validations = {
      ...validated,
      submitted,
    };
  
    return (
      ... my Foo component ...
    );
  };
  
  export const Bar = (props) =&gt; {
    const [submitted, setSubmitted] = useState(false);
    const form = useForm({ values: props.settings });
  
    const validated = props.callbacks.validate(form);
    const validations = {
      ...validated,
      submitted,
    };
  
    return (
      ... my Bar component ...
    );
  };
  </code></pre>
  <p>Is there a way I can deduplicate somehow the duplicated code? (the <code>set/submitted</code> setter/getter, the <code>form</code> definition and the <code>validated</code> / <code>validations</code> definitions).</p>
  <p>PS: I need the components to be stateless, so I can't transform the components into a class and inherit from a base class.</p>