title: Violation 'setTimeout' handler took <N>ms
body: <p>I am getting this console warning in my page -</p>
  <pre><code>[Violation] 'setTimeout' handler took &lt;N&gt;ms
  </code></pre>
  <p>I have checked for this issue, I got lot of answer but not able to resolve this Violation warning.</p>
  <p>This is my useEffect code -</p>
  <pre><code>useEffect(() =&gt; {
          const timer = setTimeout(() =&gt; {
              const diffArr = getDiffArray(
                  props.startupConfigData,
                  props.runningConfigData
              );
              if (diffArr.length &gt; 0) {
                  setDiffArr(diffArr);
                  setIsLoading(false);
              }
          }, 200);
          return () =&gt; clearTimeout(timer);
      });
  </code></pre>
  <p>This is my full file -</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { diffLines, formatLines } from &quot;./unidiff&quot;;
  import { parseDiff, Diff, Hunk } from &quot;react-diff-view&quot;;
  import { getComplianceIcon, getFormattedDate } from &quot;../common&quot;;
  import &quot;./diff.less&quot;;
  import &quot;react-diff-view/style/index.css&quot;;
  
  /**
   * This constant is used for chunking.
   * A value of 3000 takes ~ 15 secs to show the diff for real data
   * A value of 2000 takes ~ 12 secs to show the diff for real data
   */
  const THRESHOLD = 2000; //changing this is reflecting in response time, need to check
  
  const DiffViewer = props =&gt; {
      const { startUpFile, runningFile, showLoader, compareWith } = props;
      const [diffArr, setDiffArr] = useState([]);
      const [isLoading, setIsLoading] = useState(true);
  
      useEffect(() =&gt; {
          const timer = setTimeout(() =&gt; {
              const diffArr = getDiffArray(
                  props.startupConfigData,
                  props.runningConfigData
              );
              if (diffArr.length &gt; 0) {
                  setDiffArr(diffArr);
                  setIsLoading(false);
              }
          }, 200);
          return () =&gt; clearTimeout(timer);
      });
  
      /**
       * Returns an array of differences in the unidiff format
       *
       * @param {string} oldLongText - the old string to compare
       * @param {string} newLongText - the new string to compare
       * @returns {Array} - the array having the diff objects
       */
      const getDiffArray = (oldLongText = &quot;&quot;, newLongText = &quot;&quot;) =&gt; {
          if (oldLongText !== newLongText) {
              const oldTextChunks = getChunkedLinesOfText(oldLongText, THRESHOLD);
              const newTextChunks = getChunkedLinesOfText(newLongText, THRESHOLD);
              const chunkMaxLen = Math.max(oldTextChunks.length, newTextChunks.length);
              const zipChunks = (_, i) =&gt; [
                  oldTextChunks[i] || &quot;&quot;,
                  newTextChunks[i] || &quot;&quot;
              ];
              const unmodDiffContext = chunkMaxLen &gt; 1 ? 3 : 500;
              return Array.from({ length: chunkMaxLen }, zipChunks).reduce(
                  (res, [oldText, newText], idx) =&gt; {
                      const diffText = computeDiff(oldText, newText, unmodDiffContext);
                      if (diffText) {
                          const maxLenOfText =
                              idx * THRESHOLD +
                              Math.max(oldText.split(&quot;\n&quot;).length, newText.split(&quot;\n&quot;).length);
                          res.push({ diffText, start: idx * THRESHOLD, end: maxLenOfText });
                      }
                      return res;
                  },
                  []
              );
          }
          return [];
      };
  
      /**
       * Splits input text into chunks of specified size
       *
       * @param {string} text - takes the input text and splits it into chunks
       * @param {number} threshold - takes a threshold which is the chunk size
       * @returns {Array} - returns an array of strings as specified by the chunk size
       */
      const getChunkedLinesOfText = (text = &quot;&quot;, threshold = 3000) =&gt; {
          const totalLines = (typeof text === &quot;string&quot; &amp;&amp; text.split(&quot;\n&quot;)) || [];
          if (threshold &gt; 0 &amp;&amp; totalLines.length &gt; threshold) {
              const chunks = Math.ceil(totalLines.length / threshold);
              const chunkArray = (_, idx) =&gt;
                  totalLines
                      .slice(idx * threshold, idx * threshold + threshold)
                      .join(&quot;\n&quot;);
              return Array.from({ length: chunks }, chunkArray);
          }
          return [text];
      };
  
      const computeDiff = (oldText = &quot;&quot;, newText = &quot;&quot;, unmodDiffContext = 3) =&gt; {
          return formatLines(diffLines(oldText, newText), {
              context: unmodDiffContext
          });
      };
  
      const renderFile = (
          { oldRevision, newRevision, type, hunks },
          start,
          end,
          isFirstDiff
      ) =&gt; {
          const separator = `${i18n.diff_showing_lines} ${start} - ${end}`;
          return (
              &lt;div
                  className=&quot;diff-div margin-left-5px&quot;
                  key={oldRevision + `${separator}` - +newRevision}
              &gt;
                  {!isFirstDiff &amp;&amp; &lt;div className=&quot;diff-separator&quot;&gt;{separator}&lt;/div&gt;}
                  &lt;Diff
                      key={oldRevision + `${separator}` - +newRevision}
                      viewType=&quot;split&quot;
                      diffType={type}
                      hunks={hunks}
                  &gt;
                      {hunks =&gt; hunks.map(hunk =&gt; &lt;Hunk key={hunk.content} hunk={hunk} /&gt;)}
                  &lt;/Diff&gt;
              &lt;/div&gt;
          );
      };
  
      /**
       * Get text based on selection - startup/running
       */
      const getStartupText = () =&gt; {
          if (compareWith == undefined || compareWith === &quot;startup&quot;) {
              return i18n.label_startup_configuration;
          } else {
              return i18n.label_running_configuration;
          }
      };
  
      const statusDisplayDetails = getComplianceIcon(&quot;COMPLIANT&quot;, true);
      const DiffData_Loading = () =&gt; {
          let loderLabel;
          let loderLabelExtraTime = i18n.take_while_text;
          if (props.runningFile)
              loderLabel =
                  props.runningFile.totalNoOfLines &lt; 5000
                      ? &quot;Loading...&quot;
                      : loderLabelExtraTime;
          return (
              &lt;div className=&quot;loading-icon&quot;&gt;
                  &lt;DnxLoader color=&quot;#026E97&quot; size=&quot;54&quot; label={loderLabel} /&gt;
              &lt;/div&gt;
          );
      };
  
      /**
       * Function returns the DnxBanner information text for diff Position Mismatch
       */
      const _diffPositionMismatchInfoText = () =&gt; {
          const informationConfig = {
              message: i18n.diff_postion_mismatch_info,
              type: &quot;information&quot;
          };
          return (
              &lt;div className=&quot;margin-5px&quot;&gt;
                  &lt;DnxBanner name=&quot;banner-loading&quot; config={informationConfig}&gt;&lt;/DnxBanner&gt;
              &lt;/div&gt;
          );
      };
  
      /**
       * return function
       */
      return (
          &lt;div className=&quot;&quot;&gt;
              &lt;div&gt;
                  {startUpFile &amp;&amp; runningFile ? (
                      &lt;div&gt;
                          {showLoader ? (
                              DiffData_Loading()
                          ) : (
                              &lt;div&gt;
                                  &lt;div className=&quot;flex margin-left-5px&quot;&gt;
                                      &lt;div className=&quot;startup-text&quot;&gt;
                                          {getStartupText()} ({startUpFile.totalNoOfLines}{&quot; &quot;}
                                          {i18n.label_lines}) -{&quot; &quot;}
                                          {getFormattedDate(startUpFile.createdTime)}
                                      &lt;/div&gt;
                                      &lt;div className=&quot;running-text&quot;&gt;
                                          {i18n.label_running_configuration} (
                                          {runningFile.totalNoOfLines} {i18n.label_lines}) -{&quot; &quot;}
                                          {getFormattedDate(runningFile.createdTime)}
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  {diffArr &amp;&amp;
                                  props.startupConfigData !== props.runningConfigData ? (
                                      &lt;div&gt;
                                          {isLoading &amp;&amp; DiffData_Loading()}
                                          {!isLoading &amp;&amp; (
                                              &lt;div&gt;
                                                  {diffArr.map(({ diffText, start, end }, idx) =&gt;
                                                      parseDiff(diffText, { nearbySequences: &quot;zip&quot; }).map(
                                                          file =&gt; renderFile(file, start, end, idx === 0)
                                                      )
                                                  )}
                                              &lt;/div&gt;
                                          )}
                                      &lt;/div&gt;
                                  ) : (
                                      &lt;div className=&quot;div-margin-diff&quot;&gt;
                                          {statusDisplayDetails}
                                          &lt;span&gt;
                                              {compareWith === &quot;running&quot;
                                                  ? i18n.label_running_config_compliant
                                                  : i18n.label_running_startup_config_compliant}
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                  )}
                              &lt;/div&gt;
                          )}
                      &lt;/div&gt;
                  ) : (
                      &lt;div className=&quot;div-margin-diff&quot;&gt;
                          &lt;span&gt;{i18n.label_running_config_not_available}&lt;/span&gt;
                      &lt;/div&gt;
                  )}
              &lt;/div&gt;
              {_diffPositionMismatchInfoText()}
          &lt;/div&gt;
      );
  };
  
  export default DiffViewer;
  </code></pre>
  <p>Please guide me what should be changed.</p>