React useMemo and useCallback usage scenarios

function Info({
  style,
}) {
  console.log('Info rendering occurs');

  useEffect(() => {
    console.log('Reload data'); // Data will be reloaded every time a re-render occurs}, [style]);

  return (
    <p style={style}>
      This is the text in Info</p>
  );
}

function Page() {
  console.log('Page rendering');

  const [count, setCount] = useState(0);
  const style = { color: 'red' };

  // When the counter is +1, the Page is re-rendered, which in turn triggers the re-rendering of the Info return (
    <div>
      <h4>Count value: {count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <Info style={style} />
    </div>
  );
}

function Page() {
  console.log('Page rendering');

  const [color] = useState('red');
  const [count, setCount] = useState(0);
  const style = useMemo(() => ({ color }), [color]); // style will only change if color changes substantially // When the counter is +1, it triggers a re-rendering of the Page, which in turn triggers a re-rendering of the Info // However, since the style is cached, it will not trigger a reload of the data in the Info return (
    <div>
      <h4>Count value: {count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <Info style={style} />
    </div>
  );
}

class Parent extends React.Component {
   state = {
    query: 'keyword',
  }

  getData() {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${this.state.query}`;
    // Request data...
    console.log(`Request path: ${url}`);
  }

  render() {
    return (
      // Passing a query value that a child component does not render <Child getData={this.getData} query={this.state.query} />
    );
  }
}

class Child extends React.Component {
  componentDidMount() {
    this.props.getData();
  }

  componentDidUpdate(prevProps) {
    // if (prevProps.getData !== this.props.getData) { // This condition is always true
    // this.props.getData();
    // }
    if (prevProps.query !== this.props.query) { // Can only use the query value to make judgments this.props.getData();
    }
  }

  render() {
    return (
      // ...
    );
  }
}

function Parent() {
  const [count, setCount] = useState(0);
  const [query, setQuery] = useState('keyword');

  const getData = useCallback(() => {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${query}`;
    // Request data...
    console.log(`Request path: ${url}`);
  }, [query]); // getData is updated only when query changes // Changes in count value will not cause Child to re-request data return (
    <>
      <h4>Count value: {count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <input onChange={(e) => {setQuery(e.target.value)}} />
      <Child getData={getData} />
    </>
  );
}

function Child({
  getData
}) {
  useEffect(() => {
    getData();
  }, [getData]); // Functions can participate in the data flow as dependencies return (
    // ...
  );
}