useCallback in react

App.js

import React, { useState, useCallback } from "react";
import List from "./list";

function App() {
  const [number, setNumber] = useState(0);
  const [dark, setDark] = useState(0);

  // const getItems = ()=>{
  //   return [number,number+1,number+2]
  // }
  const getItems = useCallback(() => {
    return [number, number + 1, number + 2];
  }, [number]);
  const theme = {
    backgroundColor: dark ? "#333" : "#FFF",
    color: dark ? "#FFF" : "#333",
  };
  return (
    <div style={theme}>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
      />
      <button onClick={() => setDark((prevDark) => !prevDark)}>
        Toggle theme
      </button>
      <List getItems={getItems} />
    </div>
  );
}

export default App;

list.js

import React, { useState, useEffect } from "react";
export default function List({ getItems }) {
  const [items, setItems] = useState([]);
  useEffect(() => {
    setItems(getItems());
    console.log("updating items");
  }, [getItems]);
  return items.map((item) => <div key={item}>{item}</div>);
}