Invalid Hook Call in React Js

[Chaitanya-podilapu]

I'm trying to handle an operation from different re-usable component.

import { useState } from 'react';

export function DatagridControl(dataToCntrlDataGrid) {

  const [checkBoxChecked, setCheckBoxChecked] = useState([]);
  const checkBoxSelectionModalChange = (itm) => {
    setCheckBoxChecked(itm.selectionModel);
    console.log(checkBoxChecked)
  }

  return {
      checkBoxSelectionModalChange
  }
}

Upon using useState() i'm getting invalid hook call. I've gone through react documentation and this thread and nothing seems helpful and clear.

One thing i'm sure of is that i'm having a duplicate react, that i found by doing the below as stated in documentation.

`window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);`

[andybustamante]

I'm running into the same issue. Did you resolve this?

[rap0so]

Guys, have you ever tried this?

[hergaiety]

I ran into this as well and after lots of research I wrote up this article about solving it https://gaiety.life/react-library-and-peer-dependency-woes/

In short, it has to do with react and react-dom being in devDepenedencies or dependencies, which this tool does by default. Keep it only in peerDependencies.

[christopher-caldwell]

This is a non starter. The example uses link to share the same instance of React. This is not practical if your target is not near your source. For me, there's a repo that has all of the shared UI libs. The target consumer is another repo. This is of course not this library's problem, but not being able to use this with flexibility is a problem.