I have this React Invalid Hook Call Error that I'm getting and I wanted to see if I was breaking the rules of hooks or is it something else?

user_18909990 0
Viewed 2480

I'm getting the error below.

Invalid hook call. Hooks can only be called inside of the body of a function component. 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');

react-hooks reactjs javascript
2 Answers

React hooks are intended to be used inside Functional components 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 component. If you want to use things like useState or useEffect inside functions defined outside a component, 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 component and the use of hooks is reliable, also is going to make some optimizations related to hooks and components life cycle.

user_141164980

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
user_87301400
Related