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 ponent 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;

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 ponent 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;

• javascript
• reactjs
• frontend
• react-hooks
• use-effect

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

6 Answers 6

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;

I think useEffect hook is more like this:

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

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
}, []);

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

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

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

isDirectlyInsideComponentOrHook returns false because of an invalid ponent 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 ponent nor a custom ' +
                'React Hook function.' +
                ' React ponent 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.

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