如何重用一个组件确实在多个组件之间挂载了等效的钩子

Question

I have a useEffect hook that performs a few operations when the component mounts, this useEffect is repeated across many components and I'm wondering can I hoist these operations to a custom hook and then use that in each component, and what would that look like?

My useEffect hook looks like:

useEffect(() => {
  performOperationOne();
  performOperationTwo();
}, []);

Do I simply create a hook usePerformOperation and add this useEffect logic then import the hook into each component and add the hook call into another:

const triggerOperations = usePerformOperation();
useEffect(() => {
  triggerOperations()
}, []);

Is that correct? Sorry still fuzzy on hooks.

Update: Something like this:

import React from "react";
import usePerformOperation from "./usePerformOperation";

const Test = () => {
  usePerformOperation();

  return <h1>Testing Operations...</h1>;
};

export default Test;

Answer 1

It is situational, not every time you need to return something from the custom hooks.

Consider custom hook as pice of code, that will be injected to your component.

In this case, you do not need anything to be returned from your hook.

function usePerformOperation () {
  useEffect(() => {
    performOperationOne();
    performOperationTwo();
  }, []);
 // nothing is returned
}

const Test = () => {
  usePerformOperation();

  return <h1>Testing Operations...</h1>;
};

is equivalent to

const Test = () => {
  useEffect(() => {
    performOperationOne();
    performOperationTwo();
  }, []);
  return <h1>Testing Operations...</h1>;
};

Answer 2

import { useEffect, useState } from "react";
import axios from "axios";

export default () => {
    const [results, setResults] = useState([]);
    const [errorMsg, setErrorMsg] = useState("");

    //Method that calls API with parameter. You have to call this method to run the effect
    const searchAPI = async (_p) => {
    try {
      const res = await axios.get("/search", {
        params: {
          term: _p,
          limit: 40,
          location: "san jose",
        },
      });
      setErrorMsg("");
      setResults(res.data.businesses);
    } catch (ex) {
      setErrorMsg("Something went wrong");
    }
  };

  useEffect(() => {
    searchAPI("");
  }, []);

  return [searchAPI, results, errorMsg];
};

//Save above code in file name as useCustomHook //In your component file, import this hook and in your functional component, write

const [searchAPI, results, errorMsg] = useCustomHook();