react native : How to stop child component rerendering on state change?

user_228755 0
Viewed 3825

I am developing a component where i have to change state on scrollview scroll, means on onScroll function call. I have some child components in it as well ... when I do setState parent component re-renders and also re-renders to its child components. There is a child component having banner and description which I donot update on this screen but it also re-renders and create flickering effect which looks weird.

const [state, setState] = useState('');

setState('MOVING');

I also convert that child component from functional component to PureComponent but it still re-rendering.

There is no state update for this child component but it re-render as its parent re-render.

Please help to stop re-rendering of this child component as there is not state change in it.
Any solution to make it fix.

thanks.

react-native reactjs javascript
2 Answers

Your question is related to this issue. How to stop re render child component when any state changed in react js?

To stop re-render on child components you can use React memo, or useMemo if you use react hooks.

I have same issue about rerendering on child when I used React.context with lot of unneeded data passing to child. So, u can limit what should child component refer to rerender when props change with useMemo

import React, { Component, useState, useMemo } from "react";
import { render } from "react-dom";
import Child from "./components/child.js";
import "./style.css";
 
function App() {

  const [number, setNumber] = useState(0);


  function handleOnClick() {
    setNumber(number + 1);
  }

  //memo child not rendering when state update, only render child props update.
  const memoChild = useMemo(() => <Child />, []);

  // useMemo's second arguments is state variable name. example [number]. if 'number' gets update, child component rerender will be happen.
  // const memoChild = useMemo(() => <Child />, [number]);

  return (
    <div>
      <h1>Use Memo</h1>

      <div className="box">
        <h2>Parent Component</h2>
        <h4>Number : {number}</h4>
        <button onClick={() => handleOnClick()}> Increment </button>
      </div>
 
      <div className="box">
        <h2>Normal child component </h2>
        <Child /> {/*Every state update it gets rerendered */}
      </div>

      <div className="box">
        <h2>Memo child Component </h2>
        {memoChild}
      </div>

    </div>
  );
}

render(<App />, document.getElementById("root"));

for more references

user_151437090

Re-rendering component tree is something react manages well. In terms of performance, if you are looking for a way to manage not necessary re-renders I suggest you have a look at a few useful hooks, useMemo, useCallback, and a higher order component React.memo.

With these three hooks, you are able to prevent child components from re-rendering, if parent is updated.

const Parent = () => {

  const [childAState, setChildAState] = useState();

  useEffect(() => {
    setChildAState('Child A Updated');
  }, []);
  
  return (
    <>
      <ChildA childAState={childAState}/>
      <ChildB />
    </>

  );

};

const ChildA = () => React.memo((props) => {

  return <h1>Child A</h1>  

});

const ChildB = () => React.memo((props) => {

  return <h1>Child B</h1>  

});

In the above example, ChildB wont re-render if a state in Parent does change and leads to an update in ChildA.

Further reading: React.memo

user_29846530
Related