title: Why the whole page is re-rendering when i change the range slider in react?
body: <p><a href="https://i.stack.imgur.com/VhIUI.gif" rel="nofollow noreferrer">This is the gif of re-rendering</a></p>
  <p>When I slide the range slider after selecting a video, the whole page re-renders, how to avoid this problem? How to avoid unnecessary re-rendering of a component? I am using react hooks. I am placing a range slider inside the form element. I am using React Dropzone to use drag and drop facility.The setVideo state is passed to ReactDropZone component.I don't understand why this is happening</p>
  <p>Here code is,</p>
  <pre><code> import React, { useEffect, useState } from 'react';
  import Row from 'react-bootstrap/Row';
  import Col from 'react-bootstrap/Col';
  import Form from 'react-bootstrap/Form';
  import ReactDropZone from '../ReactDropZone';
  import ProgressBar from 'react-bootstrap/ProgressBar';
  import { fetchFile } from '@ffmpeg/ffmpeg';
  
  const Compress = ({ ffmpeg }) =&gt; {
      const [videoFile, setVideoFile] = useState();
      const [rangeInputVal, setRangeInputVal] = useState(1);
      const [progressVisibility, setProgressVisibility] = useState(false);
      const [completedNow, setCompletedNow] = useState(0);
      const [convertedVideo, setConvertedVideo] = useState();
  
      const convertFun = async num =&gt; {
          // Write the file to memory
          ffmpeg.FS('writeFile', 'test.mp4', await fetchFile(videoFile));
  
          // Run the FFMpeg command
          await ffmpeg.run('-i', 'test.mp4', '-crf', `${num}`, 'out.mp4');
  
          // Read the result
          const data = ffmpeg.FS('readFile', 'out.mp4');
  
          // Create a URL
          const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
          setConvertedVideo(url);
      };
  
      useEffect(() =&gt; {
          ffmpeg.setProgress(({ ratio }) =&gt; {
              console.log('completed now is', parseFloat(ratio) * 100);
              setCompletedNow(Math.round(parseFloat(ratio) * 100));
          });
      }, []);
  
      const handleRangeInput = e =&gt; {
          setRangeInputVal(e.target.value);
      };
  
      const handleCancelBtn = () =&gt; {
          setVideoFile(null);
      };
  
      const handleSubmit = e =&gt; {
          e.preventDefault();
  
          setTimeout(() =&gt; {
              setProgressVisibility(true);
          }, 200);
  
          convertFun(e.target.range.value);
  
          console.log(e.target.range.value);
      };
  
      console.log('compress video:-', videoFile);
  
      return (
          &lt;div className=&quot;compress&quot;&gt;
              &lt;div className=&quot;compress__container&quot;&gt;
                  &lt;Row className=&quot;align-items-center justify-content-center&quot;&gt;
                      &lt;Col md={12} sm={12} lg={6} className=&quot;fileuploader__area&quot;&gt;
                          {videoFile ? (
                              &lt;figure&gt;
                                  &lt;video controls src={URL.createObjectURL(videoFile)} /&gt;
                                  &lt;button className=&quot;cancelVideo&quot; onClick={handleCancelBtn}&gt;
                                      X
                                  &lt;/button&gt;
                              &lt;/figure&gt;
                          ) : (
                              &lt;ReactDropZone setVideoFile={setVideoFile} /&gt;
                          )}
                      &lt;/Col&gt;
  
                      &lt;Col md={12} sm={12} lg={6}&gt;
                          &lt;div className=&quot;compress__content&quot;&gt;
                              &lt;form onSubmit={handleSubmit}&gt;
                                  &lt;Form.Group className=&quot;choose__quality&quot;&gt;
                                      &lt;Form.Label&gt;choose quality:-&lt;/Form.Label&gt;
                                      &lt;br /&gt;
                                      &lt;Form.Control
                                          type=&quot;range&quot;
                                          min=&quot;1&quot;
                                          max=&quot;50&quot;
                                          name=&quot;range&quot;
                                          value={rangeInputVal}
                                          onChange={handleRangeInput}
                                      /&gt;
                                      &lt;span&gt;{rangeInputVal &amp;&amp; rangeInputVal}&lt;/span&gt;
                                      &lt;br /&gt;
                                      &lt;p&gt;(higher the value,smaller the size)&lt;/p&gt;
                                  &lt;/Form.Group&gt;
  
                                  &lt;Form.Group&gt;
                                      &lt;button
                                          disabled={videoFile ? false : true}
                                          style={{ opacity: videoFile ? 1 : 0.5 }}
                                          type=&quot;submit&quot;
                                          className=&quot;customBtn customBtn__small&quot;&gt;
                                          Start conversion
                                      &lt;/button&gt;
                                  &lt;/Form.Group&gt;
                              &lt;/form&gt;
  
                              &lt;Form.Group&gt;
                                  {progressVisibility &amp;&amp; (
                                      &lt;ProgressBar animated now={completedNow} label={`${completedNow} %`} /&gt;
                                  )}
                              &lt;/Form.Group&gt;
  
                              &lt;Form.Group className=&quot;download__video&quot;&gt;
                                  {completedNow === 100 &amp;&amp; (
                                      &lt;p&gt;
                                          Video is successfully converted.{' '}
                                          &lt;a
                                              href={convertedVideo}
                                              className=&quot;downloadLink&quot;
                                              download={`${videoFile &amp;&amp; videoFile.name}`}&gt;
                                              Click here to download
                                          &lt;/a&gt;{' '}
                                      &lt;/p&gt;
                                  )}
                              &lt;/Form.Group&gt;
                          &lt;/div&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default Compress;
  </code></pre>