useEffect rerender the whole table when counter changing-CodePudding

I have some problem with useEffect. When the counter changes it causes the whole table to be rerendered, but i dont pass timer as props in table. How i can prevent this behavior?

function App() {

  const dispatch = useDispatch();
 
  const data = useSelector(state => state.data);

  const [error, setError] = useState("");

  const [counter, setCounter] = useState();
  useEffect(() => {

    const fetchData = async (setError, setCounter) => {
      try {
        const response = await axios(url, token);

        dispatch(getData(response.data.value));
       
        setError("");
        setCounter(180);
      } catch(e) {
        setError("Error!");
        setCounter(180);
        
      }}

    fetchData(setError, setCounter);
    
    const interval = setInterval(() => {
      fetchData(setError, setCounter);
    }, timeToReload * 1000);

    const countInterval = setInterval(() => 
    setCounter((prev) => prev - 1), 1000)

    return () => {
      clearInterval(interval);
      clearInterval(countInterval);
    }

  },[dispatch])

  
  const dataForTable = selectorData([...data], {name: sortArrow.columnName, order: sortArrow.sortOrder, type: sortArrow.type})

  return (
    <div className="App">

      <div className="headerWrapper">

        
       <div 
        
          className={error ? "LoadingStatus disconnect": "LoadingStatus connect"}>
            {error && <div>{error}</div>}
            {isFinite(counter) && <div>{"Reload "   counter   " sec"}</div> }
        </div>

      </div>

      <Table specialCategory={specialCategory} data={dataForTable} sortArrow={sortArrow} setSortArrow={setSortArrow}/>

    </div>
  );
}

export default App;

I trued to useRef without useState, but nothing has changed. Maybe another props in Table component trigger the change?

Imptortant notice: only the body of the table is changed.

CodePudding user response：

See Here the Reasons of React Re-rendering:

If a Parent Component Re-renders, the Children re-render automatically. & because your counter state is on the Table Components parent, It will re-render every time Counter changes.

CodePudding user response：

When you update the state (e.g. setCounter(...)) of the App component, it causes the entire component with all of it's child-components, including <Table/>, to be re-rendered.

You can either create a new component for everything except the table and put the states which are changing (error and counter) into that file, or memoize the Table component like this:

import { memo } from "react";

function Table(props) {

  return (
    // [...] Your Table component.
  );
}

export default memo(Table);

And import it just as you do already. This will avoid re-rendering the table unless its props change.