title: Reactjs custom hooks generates jsx and controls events
body: <p>I'm using React hooks to generate reusable ui and events handling. Is it good to do?</p>
  
  <pre><code>import React, { useRef, useState } from "react";
  
  const CustomButton = () =&gt; {
    const [text, setText] = useState("hello");
    const lower = useRef(false);
  
    const onClick = () =&gt; {
      const newText = lower.current ? text.toUpperCase() : text.toLowerCase();
      lower.current = !lower.current;
      setText(newText);
    };
  
    const add = () =&gt; {
      return &lt;button onClick={onClick}&gt;{text}&lt;/button&gt;;
    };
  
    return { add };
  };
  
  export default CustomButton;
  </code></pre>