Error using useEffect in react functional component

user_13257704 0
Viewed 3302

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;
use-effect react-hooks reactjs frontend javascript
6 Answers

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;

user_32941200

I think useEffect hook is more like this: 

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])
user_90951580 
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
}, []);
user_62557800

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

user_130689120

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.

user_9549400

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

user_160762630
Related