功能组件仍然使用 react.memo 重新渲染

Question

I want to make a quiz app with a countdown timer. The timer use setinterval and the quiz has a functional component for Question. I have already set react.memo for the question function component. But it keeps rerender each second. It works fine on desktop. But it flickers on mobile since the input for answer keep refocus

import { useEffect, useState, memo } from 'react';

function Game() {
  let interval;
  
  const [timer, setTimer] = useState(180000);
  
  useEffect(() => {
    interval = setInterval(() => {
      setTimer(timer - 1000);
    }, 1000);
    return () => {
      if (interval) {
        clearInterval(interval)
      }
    }
  }, [timer]);
  
  const QuestionComponent = memo(props => {
    return(<div></div>);
  });

  return (
    <>
      <div>{timer}</div>
      <QuestionComponent/>
    </>
  );
}

The above code is the Game component, which will be called from App component The question component keeps rerendering even there is nothing in it.

May anyone please advise? Thank you very much

Answer 1

Ideally you should define your components outside your other components. As mentioned in comment, this line of code will run on every render. Even if you use React.memo() , this line itself will run on every render, in contrast to writing it outside where it will run normally.

If you are writing it inside, you have to persist the value between renders. It can be done using useCallback because a react component is technically a function:

 const Component = useCallback(
    memo(() => {
      console.log("rerender");
      return <div></div>;
    }),
    []
  );

Or another way is using a ref.

import { useEffect, useState, memo, useMemo, useCallback, useRef } from "react";

function App() {
  let interval;

  const [timer, setTimer] = useState(180000);
  const componentRef = useRef();
  useEffect(() => {
    interval = setInterval(() => {
      setTimer(timer - 1000);
    }, 1000);
    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, [timer]);

  useEffect(() => {
    const Component = memo(() => {
      console.log("rerender");
      return <div></div>;
    });
    componentRef.current = Component;
  }, []);

  return (
    <>
      <div>{timer}</div>
      <>{componentRef.current && <componentRef.current />}</>
    </>
  );
}

export default App;

Link

But both above are hacks. And you will definitely run into issues when you use hooks. Much better to just write it outside.

const QuestionComponent = memo(props => {
    return(<div></div>);
});

import { useEffect, useState, memo } from 'react';

function Game() {
  let interval;
  
  const [timer, setTimer] = useState(180000);
  
  useEffect(() => {
    interval = setInterval(() => {
      setTimer(timer - 1000);
    }, 1000);
    return () => {
      if (interval) {
        clearInterval(interval)
      }
    }
  }, [timer]);
  
  return (
    <>
      <div>{timer}</div>
      <QuestionComponent/>
    </>
  );
}