title: Returning array of functions from custom react hook?
body: <p>I have a custom react hook:</p>
  
  <pre><code>    function useItem(id) {
  
          const [value, setValue] = useState();
  
          useEffect(() =&gt; {
              databaseRead(id).then(i =&gt; setValue(i));
          }, [id]);
  
          function setItem(i) {
              setValue(i);
          }
  
          function writeItem(i) {
              databaseWrite(id, i);
          }
  
      return [value, setItem, writeItem];
  }
  </code></pre>
  
  <p>When using a hook like this in a component, the returned writeItem function changes every time the value changes (presumably because I create a new array every time).</p>
  
  <p>How can I avoid re-renders of the Button component when I use my hook in an Item like so?</p>
  
  <pre><code>function Item(props) {
      const [item, setItem, writeItem] = useItem(props.id);
      return(
          &lt;&gt;
              &lt;ItemEditor data={item} setItem={setItem}/&gt;
              &lt;Button onPress={writeItem}/&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  
  <p>My current working but awkward approach is to return a useRef object instead of the array from my hook:</p>
  
  <pre><code>function useItem(id) {
      const retVal = useRef({
         value: value, 
         setItem: setItem, 
         writeItem: writeItem
      }).current;
  
      const [dirty, setDirty] = useState();
      function makeDirty() { setDirty(Math.random()); }
  
      //and instead of setValue(i) do retVal.value=i; makeDirty();
      return retVal;
  }
  </code></pre>
  
  <p>Many thanks!</p>