title: How to fix warning "function -- makes the dependencies of useEffect Hook change on every render"?
body: <p>How I can fix the warning 'createGraphics' function makes the dependencies of useEffect Hook (at line 77) change on every render. Move it inside the useEffect callback. Alternatively, wrap the 'createGraphics' definition into its own useCallback() Hook.</p>
  <p>And also when I try to make empty dependency array I have this warning - React Hook React.useEffect has a missing dependency: 'createGraphics'. Either include it or remove the dependency array</p>
  <pre><code>import React from &quot;react&quot;;
  import * as d3 from &quot;d3&quot;;
  import { GraphicsItem, StatsWrapper } from &quot;../style&quot;;
  import &quot;../assets/style.css&quot;;
  
  export const GraphicItem = ({ graphNames, screenSize }) =&gt; {
    const createGraphics = () =&gt; {
      let randArray = function () {
        for (var i = 0, array = new Array([]); i &lt; 19; i++) {
          array.push(Math.floor(Math.random() * 19 + 1));
        }
        return array;
      };
      let initRandArray = randArray();
  
      let w = screenSize &gt;= 1920 ? 220 : 150;
      let h = 130;
      let barPadding = 1;
      let mAx = d3.max(initRandArray);
      let yScale = d3.scaleLinear().domain([0, mAx]).range([0, h]);
  
      let svg1;
  
      svg1 = d3.select(`.item0`).append(&quot;svg&quot;).attr(&quot;width&quot;, w).attr(&quot;height&quot;, h);
  
      function setSvgItem(svg) {
        svg
          .selectAll(&quot;rect&quot;)
          .data(initRandArray)
          .enter()
          .append(&quot;rect&quot;)
          .attr(&quot;x&quot;, function (d, i) {
            return i === 18
              ? screenSize &gt;= 1920
                ? &quot;61&quot;
                : &quot;41.5&quot;
              : i === 19
              ? screenSize &gt;= 1920
                ? &quot;136&quot;
                : &quot;93&quot;
              : i * (w / initRandArray.length);
          })
          .attr(&quot;y&quot;, function (d) {
            return h - yScale(d);
          })
          .attr(&quot;width&quot;, w / initRandArray.length - barPadding)
          .attr(&quot;height&quot;, function (d) {
            return yScale(d);
          })
          .attr(&quot;fill&quot;, function (d, index) {
            return index === 19
              ? &quot;rgb(246 185 46)&quot;
              : index === 18
              ? &quot;rgb(0 212 198)&quot;
              : &quot;rgb(rgb 16 19 &quot; + d * 100 + &quot;)&quot;;
          });
      }
  
      const setSvgElements = () =&gt; {
        setSvgItem(svg1);
      };
  
      return setSvgElements();
    };
  
    React.useEffect(() =&gt; {
      createGraphics();
    }, [createGraphics]);
  
    return (
      &lt;&gt;
      ///////
      &lt;/&gt;
    );
  };
  
  </code></pre>