title: React object is not a function error on useEffect
body: <p>I am having issues when using the useEffect hook in this functional component. I get an object is not a function error.</p>
  <p>I saw this error is often found in camelCase named functional components, however, this is a PascalCase named functional component.</p>
  <p>Please let me know if you can spot the error. This is from an udemy tutorial on React, so please excuse my noobness :)</p>
  <p>Edit: I confirm that when commenting out useEffect, the component is rendered without issues</p>
  <p>Edit 2: In order to make sure that there isn't any syntax error, I created a toBeExecuted function which I would then pass as a parameter of useEffect(tried both only passing the method name, as well as calling it), and the error is still present</p>
  <p>$ npm view react version
  16.13.1</p>
  <pre><code>    import React, { useEffect } from &quot;react&quot;;
      
      import classes from &quot;./Cockpit.css&quot;;
      
      const Cockpit = (props) =&gt; {
        useEffect(() =&gt; {
          console.log(&quot;shd&quot;);
          setTimeout(() =&gt; {
            alert(&quot;Saved data to cloud!&quot;);
          }, 1000);
          return () =&gt; {
            console.log('[Cockpit.js] cleanup work in use')
          }
        }, [props.persons]);
      
        const assignedClasses = [];
        let btnClass = &quot;&quot;;
        if (props.showPersons) {
          btnClass = classes.Red;
        }
        
        if (props.persons.length &lt;= 2) {
          assignedClasses.push(classes.red); // classes = ['red']
        }
        if (props.persons.length &lt;= 1) {
          assignedClasses.push(classes.bold); // classes = ['red', 'bold']
        }
      
        return (
          &lt;div className={classes.Cockpit}&gt;
            &lt;h1&gt;{props.title}&lt;/h1&gt;
            &lt;p className={assignedClasses.join(&quot; &quot;)}&gt;This is really working!&lt;/p&gt;
            &lt;button className={btnClass} onClick={props.clicked}&gt;
              Toggle Persons
            &lt;/button&gt;
          &lt;/div&gt;
        );
      };
      
      export default Cockpit;
  </code></pre>
  <p>Below is the console error</p>
  <pre><code>Uncaught TypeError: Object(...) is not a function
      at Cockpit (Cockpit.js:6)
      at mountIndeterminateComponent (react-dom.development.js:10449)
      at beginWork (react-dom.development.js:10647)
      at performUnitOfWork (react-dom.development.js:12621)
      at workLoop (react-dom.development.js:12730)
      at HTMLUnknownElement.callCallback (react-dom.development.js:1319)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:1358)
      at invokeGuardedCallback (react-dom.development.js:1215)
      at performWork (react-dom.development.js:12848)
      at scheduleUpdateImpl (react-dom.development.js:13233)
      at scheduleUpdate (react-dom.development.js:13172)
      at scheduleTopLevelUpdate (react-dom.development.js:13445)
      at Object.updateContainer (react-dom.development.js:13475)
      at react-dom.development.js:17168
      at Object.unbatchedUpdates (react-dom.development.js:13304)
      at renderSubtreeIntoContainer (react-dom.development.js:17167)
      at Object.render (react-dom.development.js:17192)
      at Object../src/index.js (index.js:7)
      at __webpack_require__ (bootstrap 27db9ccab8c2fd790147:669)
      at fn (bootstrap 27db9ccab8c2fd790147:87)
      at Object.0 (registerServiceWorker.js:108)
      at __webpack_require__ (bootstrap 27db9ccab8c2fd790147:669)
      at bootstrap 27db9ccab8c2fd790147:715
      at bundle.js:719
  </code></pre>
  <p>Below is the browser error</p>
  <pre><code>×
  TypeError: Object(...) is not a function
  Cockpit
  C:/react course/module 7/debugging--01-finished/src/components/Cockpit/Cockpit.js:6
    3 | import classes from &quot;./Cockpit.css&quot;;
    4 | 
    5 | const Cockpit = (props) =&gt; {
  &gt; 6 |   useEffect(() =&gt; {
    7 |     console.log(&quot;shd&quot;);
    8 |     setTimeout(() =&gt; {
    9 |       alert(&quot;Saved data to cloud!&quot;);
  View compiled
  mountIndeterminateComponent
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:10449
    10446 | 
    10447 | {
    10448 |   ReactCurrentOwner$2.current = workInProgress;
  &gt; 10449 |   value = fn(props, context);
    10450 | }
    10451 | // React DevTools reads this flag.
    10452 | workInProgress.effectTag |= PerformedWork$1;
  View compiled
  beginWork
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:10647
    10644 | 
    10645 | switch (workInProgress.tag) {
    10646 |   case IndeterminateComponent$2:
  &gt; 10647 |     return mountIndeterminateComponent(current, workInProgress, priorityLevel);
    10648 |   case FunctionalComponent$1:
    10649 |     return updateFunctionalComponent(current, workInProgress);
    10650 |   case ClassComponent$6:
  View compiled
  performUnitOfWork
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12621
    12618 | {
    12619 |   startWorkTimer(workInProgress);
    12620 | }
  &gt; 12621 | var next = beginWork(current, workInProgress, nextPriorityLevel);
    12622 | if (true &amp;&amp; ReactFiberInstrumentation$1.debugTool) {
    12623 |   ReactFiberInstrumentation$1.debugTool.onBeginWork(workInProgress);
    12624 | }
  View compiled
  workLoop
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12730
    12727 | if (nextPriorityLevel &lt;= TaskPriority$1) {
    12728 |   // Flush all synchronous and task work.
    12729 |   while (nextUnitOfWork !== null) {
  &gt; 12730 |     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    12731 |     if (nextUnitOfWork === null) {
    12732 |       !(pendingCommit !== null) ? invariant(false, 'Should have a pending commit. This error is likely caused by a bug in React. Please file an issue.') : void 0;
    12733 |       // We just completed a root. Commit it now.
  View compiled
  HTMLUnknownElement.callCallback
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1319
    1316 |   // nested call would trigger the fake event handlers of any call higher
    1317 |   // in the stack.
    1318 |   fakeNode.removeEventListener(evtType, callCallback, false);
  &gt; 1319 |   func.apply(context, funcArgs);
    1320 |   didError = false;
    1321 | }
    1322 | 
  View compiled
  invokeGuardedCallbackDev
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1358
    1355 | // errors, it will trigger our global error handler.
    1356 | var evt = document.createEvent('Event');
    1357 | evt.initEvent(evtType, false, false);
  &gt; 1358 | fakeNode.dispatchEvent(evt);
    1359 | 
    1360 | if (didError) {
    1361 |   if (!didSetError) {
  View compiled
  invokeGuardedCallback
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1215
    1212 |  * @param {...*} args Arguments for function
    1213 |  */
    1214 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
  &gt; 1215 |   invokeGuardedCallback.apply(ReactErrorUtils, arguments);
    1216 | },
    1217 | 
    1218 | /**
  View compiled
  performWork
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12848
    12845 | var didError = false;
    12846 | var error = null;
    12847 | {
  &gt; 12848 |   invokeGuardedCallback$1(null, workLoop, null, minPriorityLevel, deadline);
    12849 |   if (hasCaughtError()) {
    12850 |     didError = true;
    12851 |     error = clearCaughtError();
  View compiled
  scheduleUpdateImpl
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13233
    13230 |     performWork(SynchronousPriority$1, null);
    13231 |   } else {
    13232 |     // Flush both synchronous and task work.
  &gt; 13233 |     performWork(TaskPriority$1, null);
    13234 |   }
    13235 |   break;
    13236 | case TaskPriority$1:
  View compiled
  scheduleUpdate
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13172
    13169 | }
    13170 | 
    13171 | function scheduleUpdate(fiber, priorityLevel) {
  &gt; 13172 |   return scheduleUpdateImpl(fiber, priorityLevel, false);
    13173 | }
    13174 | 
    13175 | function scheduleUpdateImpl(fiber, priorityLevel, isErrorRecovery) {
  View compiled
  scheduleTopLevelUpdate
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13445
    13442 |     warning$18(callback === null || typeof callback === 'function', 'render(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callback);
    13443 |   }
    13444 |   addTopLevelUpdate(current, nextState, callback, priorityLevel);
  &gt; 13445 |   scheduleUpdate(current, priorityLevel);
    13446 | }
    13447 | 
    13448 | return {
  View compiled
  updateContainer
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13475
    13472 |     container.pendingContext = context;
    13473 |   }
    13474 | 
  &gt; 13475 |   scheduleTopLevelUpdate(current, element, callback);
    13476 | },
    13477 | 
    13478 | 
  View compiled
  (anonymous function)
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17168
    17165 |   root = container._reactRootContainer = newRoot;
    17166 |   // Initial mount should not be batched.
    17167 |   DOMRenderer.unbatchedUpdates(function () {
  &gt; 17168 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
    17169 |   });
    17170 | } else {
    17171 |   DOMRenderer.updateContainer(children, root, parentComponent, callback);
  View compiled
  unbatchedUpdates
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13304
    13301 | isUnbatchingUpdates = isBatchingUpdates;
    13302 | isBatchingUpdates = false;
    13303 | try {
  &gt; 13304 |   return fn();
    13305 | } finally {
    13306 |   isBatchingUpdates = previousIsBatchingUpdates;
    13307 |   isUnbatchingUpdates = previousIsUnbatchingUpdates;
  View compiled
  renderSubtreeIntoContainer
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17167
    17164 |   var newRoot = DOMRenderer.createContainer(container);
    17165 |   root = container._reactRootContainer = newRoot;
    17166 |   // Initial mount should not be batched.
  &gt; 17167 |   DOMRenderer.unbatchedUpdates(function () {
    17168 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
    17169 |   });
    17170 | } else {
  View compiled
  render
  C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17192
    17189 |   return renderSubtreeIntoContainer(null, element, container, true, callback);
    17190 | },
    17191 | render: function (element, container, callback) {
  &gt; 17192 |   return renderSubtreeIntoContainer(null, element, container, false, callback);
    17193 | },
    17194 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
    17195 |   !(parentComponent != null &amp;&amp; ReactInstanceMap_1.has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
  View compiled
  ./src/index.js
  C:/react course/module 7/debugging--01-finished/src/index.js:7
     4 | import App from './containers/App';
     5 | import registerServiceWorker from './registerServiceWorker';
     6 | 
  &gt;  7 | ReactDOM.render(&lt;App appTitle=&quot;Person Manager&quot; /&gt;, document.getElementById('root'));
     8 | registerServiceWorker();
     9 | 
    10 | 
  View compiled
  __webpack_require__
  C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:669
    666 | };
    667 | 
    668 | // Execute the module function
  &gt; 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
    670 | 
    671 | // Flag the module as loaded
    672 | module.l = true;
  View compiled
  fn
  C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:87
    84 |      console.warn(&quot;[HMR] unexpected require(&quot; + request + &quot;) from disposed module &quot; + moduleId);
    85 |      hotCurrentParents = [];
    86 |  }
  &gt; 87 |  return __webpack_require__(request);
    88 | };
    89 | var ObjectFactory = function ObjectFactory(name) {
    90 |  return {
  View compiled
  0
  http://localhost:3000/static/js/bundle.js:63759:18
  __webpack_require__
  C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:669
    666 | };
    667 | 
    668 | // Execute the module function
  &gt; 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
    670 | 
    671 | // Flag the module as loaded
    672 | module.l = true;
  View compiled
  (anonymous function)
  C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:715
    712 | __webpack_require__.h = function() { return hotCurrentHash; };
    713 | 
    714 | // Load entry module and return exports
  &gt; 715 | return hotCreateRequire(0)(__webpack_require__.s = 0);
    716 | 
    717 | 
    718 | 
  View compiled
  (anonymous function)
  http://localhost:3000/static/js/bundle.js:719:10
  This screen is visible only in development. It will not appear if the app crashes in production.
  Open your browser’s developer console to further inspect this error.
  </code></pre>
  <p>Below is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;react-complete-guide&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;7.1.2&quot;,
      &quot;babel-core&quot;: &quot;6.25.0&quot;,
      &quot;babel-eslint&quot;: &quot;7.2.3&quot;,
      &quot;babel-jest&quot;: &quot;20.0.3&quot;,
      &quot;babel-loader&quot;: &quot;7.1.1&quot;,
      &quot;babel-preset-react-app&quot;: &quot;^3.0.2&quot;,
      &quot;babel-runtime&quot;: &quot;6.26.0&quot;,
      &quot;case-sensitive-paths-webpack-plugin&quot;: &quot;2.1.1&quot;,
      &quot;chalk&quot;: &quot;1.1.3&quot;,
      &quot;css-loader&quot;: &quot;0.28.4&quot;,
      &quot;dotenv&quot;: &quot;4.0.0&quot;,
      &quot;eslint&quot;: &quot;4.4.1&quot;,
      &quot;eslint-config-react-app&quot;: &quot;^2.0.0&quot;,
      &quot;eslint-loader&quot;: &quot;1.9.0&quot;,
      &quot;eslint-plugin-flowtype&quot;: &quot;2.35.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;2.7.0&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;5.1.1&quot;,
      &quot;eslint-plugin-react&quot;: &quot;7.1.0&quot;,
      &quot;extract-text-webpack-plugin&quot;: &quot;3.0.0&quot;,
      &quot;file-loader&quot;: &quot;0.11.2&quot;,
      &quot;fs-extra&quot;: &quot;3.0.1&quot;,
      &quot;html-webpack-plugin&quot;: &quot;2.29.0&quot;,
      &quot;jest&quot;: &quot;20.0.4&quot;,
      &quot;object-assign&quot;: &quot;4.1.1&quot;,
      &quot;postcss-flexbugs-fixes&quot;: &quot;3.2.0&quot;,
      &quot;postcss-loader&quot;: &quot;2.0.6&quot;,
      &quot;promise&quot;: &quot;8.0.1&quot;,
      &quot;radium&quot;: &quot;^0.19.4&quot;,
      &quot;react&quot;: &quot;^16.0.0-rc.3&quot;,
      &quot;react-dev-utils&quot;: &quot;^4.0.1&quot;,
      &quot;react-dom&quot;: &quot;^16.0.0-rc.3&quot;,
      &quot;style-loader&quot;: &quot;0.18.2&quot;,
      &quot;sw-precache-webpack-plugin&quot;: &quot;0.11.4&quot;,
      &quot;url-loader&quot;: &quot;0.5.9&quot;,
      &quot;webpack&quot;: &quot;3.5.1&quot;,
      &quot;webpack-dev-server&quot;: &quot;2.7.1&quot;,
      &quot;webpack-manifest-plugin&quot;: &quot;1.2.1&quot;,
      &quot;whatwg-fetch&quot;: &quot;2.0.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;node scripts/start.js&quot;,
      &quot;build&quot;: &quot;node scripts/build.js&quot;,
      &quot;test&quot;: &quot;node scripts/test.js --env=jsdom&quot;
    },
    &quot;jest&quot;: {
      &quot;collectCoverageFrom&quot;: [
        &quot;src/**/*.{js,jsx}&quot;
      ],
      &quot;setupFiles&quot;: [
        &quot;&lt;rootDir&gt;/config/polyfills.js&quot;
      ],
      &quot;testMatch&quot;: [
        &quot;&lt;rootDir&gt;/src/**/__tests__/**/*.js?(x)&quot;,
        &quot;&lt;rootDir&gt;/src/**/?(*.)(spec|test).js?(x)&quot;
      ],
      &quot;testEnvironment&quot;: &quot;node&quot;,
      &quot;testURL&quot;: &quot;http://localhost&quot;,
      &quot;transform&quot;: {
        &quot;^.+\\.(js|jsx)$&quot;: &quot;&lt;rootDir&gt;/node_modules/babel-jest&quot;,
        &quot;^.+\\.css$&quot;: &quot;&lt;rootDir&gt;/config/jest/cssTransform.js&quot;,
        &quot;^(?!.*\\.(js|jsx|css|json)$)&quot;: &quot;&lt;rootDir&gt;/config/jest/fileTransform.js&quot;
      },
      &quot;transformIgnorePatterns&quot;: [
        &quot;[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$&quot;
      ],
      &quot;moduleNameMapper&quot;: {
        &quot;^react-native$&quot;: &quot;react-native-web&quot;
      },
      &quot;moduleFileExtensions&quot;: [
        &quot;web.js&quot;,
        &quot;js&quot;,
        &quot;json&quot;,
        &quot;web.jsx&quot;,
        &quot;jsx&quot;,
        &quot;node&quot;
      ]
    },
    &quot;babel&quot;: {
      &quot;presets&quot;: [
        &quot;react-app&quot;
      ]
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    }
  }
  </code></pre>