How to optimize code in React Hooks using memo

Question

I have this code .

and here is the code snippet

  const [indicators, setIndicators] = useState([]);
  const [curText, setCurText] = useState('');
  const refIndicator = useRef()

  useEffect(() => {
    console.log(indicators)
  }, [indicators]);

  const onSubmit = (e) => {
    e.preventDefault();
    setIndicators([...indicators, curText]);
    setCurText('')
  }

  const onChange = (e) => {
    setCurText(e.target.value);
  }


  const MemoInput = memo((props)=>{
    console.log(props)
    return(
      <ShowIndicator name={props.name}/>
    )
  },(prev, next) => console.log('prev',prev, next)
  );

It shows every indicator every time I add in the form.

The problem is that ShowIndicator updates every time I add something.

Is there a way for me to limit the the time my App renders because for example I created 3 ShowIndicators , then it will also render 3 times which I think very costly in the long run.

I'm also thinking of using useRef just to not make my App renders every time I input new text, but I'm not sure if it's the right implementation because most documentations recommend using controlled components by using state as handler of current value.

Answer 1

React.memo will stop your child component rendering if the parent rerenders (and if the props are the same), but it isn't helping in your case because you have defined the component inside your App component. Each time App renders, you're creating a new reference of MemoInput.

Updated example: https://codesandbox.io/s/currying-tdd-mikck

Answer 2

Link to Sandbox:

https://codesandbox.io/s/musing-kapitsa-n8gtj

App.js

  // const MemoInput = memo(
  //   props => {
  //     console.log(props);
  //     return <ShowIndicator name={props.name} />;
  //   },
  //   (prev, next) => console.log("prev", prev, next)
  // );

  const renderList = () => {
    return indicators.map((data,index) => {
      return <ShowIndicator key={index} name={data} />;
    });
  };

ShowIndicator.js

import React from "react";

const ShowIndicator = ({ name }) => {
  console.log("rendering showIndicator");
  const renderDatas = () => {
    return <div key={name}>{name}</div>;
  };

  return <>{renderDatas()}</>;
};

export default React.memo(ShowIndicator);    // EXPORT React.memo

Answer 3

Observing the given sandbox app behaviour, it seems like the whole app renders for n times when there are n indicators .

I forked the sandbox and moved the list to another functional component (and memo 'ed it based on prev and next props.

This will ensure my 'List' is rendered every time a new indicator is added. The whole app will render only when a new indicator is added to the list.

Checkout this sandbox forked from yours - https://codesandbox.io/embed/avoid-re-renders-react-l4rm2