3

I am learning to use react hooks to manage state but I get the error saying Line 5:3: React Hook "useEffect" is called in function "cockpit" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

here is my code

import React, {useEffect} from "react";
import classes from "./Cockpit.module.css";

const cockpit = (props) => {
  useEffect(() => {
    console.log('Cockpit js useEffect');

  });

  const assiginedClasses = [];
  let btnClass = "";
  if (props.showPersons) {
    btnClass = classes.Red;
  }

  if (props.persons.length <= 2) {
    assiginedClasses.push(classes.red);
  }

  if (props.persons.length <= 1) {
    assiginedClasses.push(classes.bold);
  }
  return (
    <div className={classes.Cockpit}>
      <h1>Hi I'm a React App</h1>
      <p className={assiginedClasses.join(" ")}>This is really Working!</p>
      <button className={btnClass} onClick={props.clicked}>
        Toggle Name
      </button>
    </div>
  );
};

export default cockpit;
2
  • 2
    How are you using this component? Can you show your other code
    – ProEvilz
    May 14, 2020 at 7:53
  • 4
    I'd assume that the linter doesn't recognize the function. Functional components (like classes) usually start with a capital letter, and hooks start with "use"
    – Thomas
    May 14, 2020 at 7:54

6 Answers 6

5

Below line changed after remove error solved. This code is work. 1. const cockpit = (props) => { 2. export default cockpit;

Replace below Line 1. const Cockpit = (props) => { 2. export default Cockpit;

0

I think useEffect hook is more like this:

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])
0
useEffect(() => {
  console.log('Cockpit js useEffect');
}, []); // []: is used for initial state

useEffect(() => {
   console.log('Cockpit js useEffect');
}, [something]); When {something} is changed call print 'Cockpit js useEffect'


useEffect(() => {
  return () => console.log('unmount'); // return and unmount
}, []);
0

Functional components usually start with capital letters. So change the name 'cockpit' to 'Cockpit'

0

It's a linter "error" that comes from https://www.npmjs.com/package/eslint-plugin-react-hooks.

Very specifically it comes from: https://github.com/facebook/react/blob/ddcc69c83b59ef0f895aa5020196e2ae9de36133/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L478

isDirectlyInsideComponentOrHook returns false because of an invalid component name.

        const isDirectlyInsideComponentOrHook = codePathFunctionName
          ? isComponentName(codePathFunctionName) ||
            isHook(codePathFunctionName)
          : isForwardRefCallback(codePathNode) || isMemoCallback(codePathNode);

So then you get this error:

            } else if (codePathFunctionName) {
              // Custom message if we found an invalid function name.
              const message =
                `React Hook "${context.getSource(hook)}" is called in ` +
                `function "${context.getSource(codePathFunctionName)}" ` +
                'that is neither a React function component nor a custom ' +
                'React Hook function.' +
                ' React component names must start with an uppercase letter.';
              context.report({node: hook, message});
            }

If your function name doesn't start with a capital letter, then react will display this "error" in your console.

0

When using useEffect hooks your main function name should start with a capital letter use Cockpit instead of cockpit

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.