I'm getting the error below.

Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

See (link I couldn't add) for tips about how to debug and fix this problem.

1. You might have mismatching versions of React and the renderer (such as React DOM)

Here is my code. Is it breaking rules of hooks or is the issue something else?

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useData } from 'useData';

export const checkReference = ({
  refId,
}) => {
  const data = useData(); //useContext hook
  let refData = {};
  if (refId) refData = data.getReference(refId);

  useEffect(() => {
    console.log('INITIAL LOGIC');
    if (refData.parameter){
      console.log('SECONDARY LOGIC', refData);
    }
  }, [])
  
  checkReference.propTypes = {
    refId: PropTypes.string,
  }
  checkReference.defaultProps = {
    refId: null,
  }
}

I am calling it from another file using checkReference('page-name');

I'm getting the error below.

Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

See (link I couldn't add) for tips about how to debug and fix this problem.

1. You might have mismatching versions of React and the renderer (such as React DOM)

Here is my code. Is it breaking rules of hooks or is the issue something else?

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useData } from 'useData';

export const checkReference = ({
  refId,
}) => {
  const data = useData(); //useContext hook
  let refData = {};
  if (refId) refData = data.getReference(refId);

  useEffect(() => {
    console.log('INITIAL LOGIC');
    if (refData.parameter){
      console.log('SECONDARY LOGIC', refData);
    }
  }, [])
  
  checkReference.propTypes = {
    refId: PropTypes.string,
  }
  checkReference.defaultProps = {
    refId: null,
  }
}

I am calling it from another file using checkReference('page-name');

• javascript
• reactjs
• react-hooks

• Yes this is a violation. Hooks are supposed to be used inside UI Component/Element. Your checkReference is just a normal/utility function. The solution is to use another method for getting data inside this utility function, or if you need to return any HTML, then do the return – Bao Huynh Commented Apr 22, 2022 at 17:04

2 Answers 2

I've got the same issue in my Next.js app. It was a cache related issue. you can try these steps.

1. Delete node_modules and .next folders
2. Run npm install or yarn
3. Start your project again

React hooks are intended to be used inside Functional ponents like:

export const CustomComponent = () => {}
export function CustomComponent() {}

They cannot be used in normal function because it won't exist inside the context of a React ponent. If you want to use things like useState or useEffect inside functions defined outside a ponent, you have to create a custom hook. That is, create a function with the use prefix (e.g. useCheckReference) and then use it like:

export const MyComponent = () => {
  const reference = useCheckReference()
}

In that way React knows that that function is presumably gonna be called inside a ponent and the use of hooks is reliable, also is going to make some optimizations related to hooks and ponents life cycle.