React Hook useMemo has missing dependencies

Question

How to handle this warning? (React Hook useMemo has missing dependencies: 'deleteTutorial' and 'openTutorial'. Either include them or remove the dependency array react-hooks/exhaustive-deps) If I put openTutorial and deleteTutorial inside useMemo hook, there wont be compile warning, but then I have a problem that those two functions wont work.

  const openTutorial = (rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    props.history.push("/tutorials/" + id);
  };

  const deleteTutorial = (rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    TutorialDataService.remove(id).then((response) => {
      props.history.push("/tutorials");

      let newTutorials = [...tutorialsRef.current];
      newTutorials.splice(rowIndex, 1);

      setTutorials(newTutorials);
    }).catch((e) => {
      console.log(e);
    });
  };

  const columns = useMemo(() => [
    {
      Header: "Naziv",
      accessor: "title"
    }, {
      Header: "Opis",
      accessor: "description"
    }, {
      Header: "Površina",
      accessor: "povrsina"
    }, {
      Header: "Dužina x Širina",
      accessor: properties => properties.duzina + ' x ' + properties.sirina
    }, {
      Header: "",
      accessor: "actions",
      Cell: (props) => {
        const rowIdx = props.row.id;

        return (<div>
          <span onClick={() => openTutorial(rowIdx)}>
            <i className="far fa-edit action mr-2"></i>
          </span>

          <span onClick={() => (confirmDialog('Da li želite obrisati parcelu?', () => deleteTutorial(rowIdx)))
}>
            <i className="fas fa-trash action"></i>
          </span>

        </div>);
      }
    }
  ], []);

/ EDIT / Now I have problem that useCallback has missing dependency props.history. Is it ok to fix it like this:

const callHistory = useCallback(() => {
    props.history.push("/tutorials");
  }, [props.history]);

  const deleteTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    TutorialDataService.remove(id).then((response) => {

      callHistory();
      let newTutorials = [...tutorialsRef.current];
      newTutorials.splice(rowIndex, 1);

      setTutorials(newTutorials);
    }).catch((e) => {
      console.log(e);
    });
  }, [callHistory]);

Answer 1

Let me explain, when I make it like this:

  const openTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    props.history.push("/tutorials/" + id);
  }, []);

  const deleteTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    TutorialDataService.remove(id).then((response) => {
      props.history.push("/tutorials");

      let newTutorials = [...tutorialsRef.current];
      newTutorials.splice(rowIndex, 1);

      setTutorials(newTutorials);
    }).catch((e) => {
      console.log(e);
    });
  }, []);

  const columns = useMemo(() => [
    {
      Header: "Naziv",
      accessor: "title"
    }, {
      Header: "Opis",
      accessor: "description"
    }, {
      Header: "Površina",
      accessor: "povrsina"
    }, {
      Header: "Dužina x Širina",
      accessor: properties => properties.duzina + ' x ' + properties.sirina
    }, {
      Header: "",
      accessor: "actions",
      Cell: (props) => {
        const rowIdx = props.row.id;

        return (<div>
          <span onClick={() => openTutorial(rowIdx)}>
            <i className="far fa-edit action mr-2"></i>
          </span>

          <span onClick={() => (confirmDialog('Da li želite obrisati parcelu?', () => deleteTutorial(rowIdx)))
}>
            <i className="fas fa-trash action"></i>
          </span>

        </div>);
      }
    }
  ], [deleteTutorial, openTutorial]);

i get this warning: React Hook useCallback has a missing dependency: 'props.history'. Either include it or remove the dependency array react-hooks/exhaustive-deps

So I am wondering if it is ok to put props.history in dependency:

  const openTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    props.history.push("/tutorials/" + id);
  }, [props.history]);

@moderator: sorry, I dont know how to put code in comment, so I answered my question, but I think this is really answer to my question :)