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

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