Question 203854 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – redux , invalid hook call. Hooks can only be called inside of the body of a function component

goodTime , im beginner at redux and when i setup that and use Provider in root.render it show me this Err :

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    and Uncaught TypeError: Cannot read properties of null (reading ‘useMemo’)

it just for Provider component , if i dont call it i will don’t have this error.

thanks for helping me

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider>
    <App />
  </Provider>
);

reportWebVitals();

i uninstalled the redux and npm package and then install them with last version but i have same problem
someone said maybe its for have same name in two package and it is confusing the computer but i dont think so

Tags:

2

Answers


  1. 0

    You need to pass the store to the Provider

    import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from "./path/to/store"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();
    Login or Signup to reply.
  2. 0

    I already made a comment, but to make it more visible, I am pasting this code snippet. Let me know if there is any other issue there?

    import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from "./store" // you need a store to provide to the provider

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

    The change is in this line

    import store from "./store"
<Provider store={store}>
    <App />
</Provider>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search