how to resolve cannot use Hooks inside useEffect

Question

This is my function I am importing from another file

import { useMemo } from 'react'
import { useIntl } from 'react-intl'

export function useRenderStatus(param) {
  const { messages } = useIntl()
  const data = useMemo(() => {
    if (param === 'ACTIVE') return messages.page.active
    if (param === 'INACTIVE') return messages.page.inactive
    return 'invalid'
  }, [messages, param])

  return data
}

And while I query the data in my main file, I parse it into the needed language in this way..

  useEffect(() => {
    if (data) {
      const parsed = data.map((item) => ({
        ...item,
        status: useRenderStatus(item.status),
      }))
      setData(parsed)
    }
  }, [data, useRenderStatus])

Here I get the error that I cannot useRenderStatus inside useEffect, what would my alternative approach be?

I need the useRenderStatus to be in a separate file because I have many other similar functions like that which I want to reuse, all inside useEffect. How to solve this issue?

Answer 1

Since hooks must be executed in the same order, every time, you cannot use hooks inside useEffect, since that executes conditionally

https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

Answer 2

You'll need to refactor the guts of useRenderStatus into a free function and then call it:

import { useMemo } from "react";
import { useIntl } from "react-intl";

function getStatus(messages, param) {
  if (param === "ACTIVE") return messages.page.active;
  if (param === "INACTIVE") return messages.page.inactive;
  return "invalid";
}

// Not used in this example, but shows the refactoring
function useRenderStatus(param) {
  const { messages } = useIntl();
  return useMemo(() => getStatus(messages, param), [messages, param]);
}

function Component() {
  const { messages } = useIntl();
  useEffect(() => {
    if (data) {
      const parsed = data.map((item) => ({
        ...item,
        status: getStatus(messages, item.status),
      }));
      setData(parsed);
    }
  }, [messages, data]);
}

This will trigger an infinite render loop bug, however, since your effect depends on the state atom it itself sets.

It's better to use useMemo to derive the status-set state based on the data:

function Component() {
  const {messages} = useIntl();
  const data = [/* ... */];
  const dataWithStatuses = useMemo(() => {
    if (data) {
      return data.map((item) => ({
        ...item,
        status: getStatus(messages, item.status),
      }))
    }
    return null;
  }, [messages, data]);
}

Once you've done that , you could wrap that into a custom hook...

function useDataWithStatuses(data) {
  const {messages} = useIntl();
  return useMemo(() => {
    if (data) {
      return data.map((item) => ({
        ...item,
        status: getStatus(messages, item.status),
      }))
    }
    return null;
  }, [messages, data]);
}

function Component() {
  const data = [/* ... */];
  const dataWithStatuses = useDataWithStatuses(data);
}

Answer 3

useRenderStatus returns data...you have it on the dependencies. What you are passing to useEffect is a callback that will be called when the dependencies change...useRenderStatus will not change unless the reference changes... Call useRenderStatus outside of the useEffect to get the value of data. Use data as the value of status maybe? useMemo is useful for memoizing the result of calling a function doing some calculation and not running the function on every render(only when the array of dependencies changes)