ReactJS - использовать один и тот же крючок в разных компонентах

Question

У меня есть хук, который извлекает данные из API и результат, который я помещаю в состояние моего компонента с помощью setAllCommunitiesFromSponsor.

Теперь мне нужно использовать точно такой же хук в другом компоненте.

В этом случае, как правильно реализовать это, кроме копирования пасты? Мне нужно создать кастомный хук? Но как насчет функции setState?

крючок:

  useEffect(() => {
    const getAllCommunitiesFromSponsor = async () => {
      try {
        const result = await api.get(
          'https://someurl.com'
        )
        const resultArray = Object.values(result.data.rows)
        setAllCommunitiesFromSponsor(resultArray)
      } catch (error) {
        toast.error('Failed to fetch data from the server')
      }
    }
    getAllCommunitiesFromSponsor()
  }, [])

Answer 1

Вы можете создать свой собственный хук, это очень просто. Это просто функция, которая использует хуки. В вашем случае:

const useCommunitiesForSponsor = () => {
    const [allCommunitiesFromSponsor, setAllCommunitiesFromSponsor] = useState();

    useEffect(() => {
        const getAllCommunitiesFromSponsor = async () => {
            try {
                const result = await api.get(
                    'https://someurl.com'
                )
                const resultArray = Object.values(result.data.rows)
                setAllCommunitiesFromSponsor(resultArray)
            } catch (error) {
                toast.error('Failed to fetch data from the server')
            }
        }
        getAllCommunitiesFromSponsor()
    }, [])

    return allCommunitiesFromSponsor;
}

Теперь в ваших компонентах просто используйте крючок, как и любой другой крючок:

const allCommunitiesFromSponsor = useCommunitiesForSponsor();