question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Getting warning on using <PersistGate></PersistGate>

See original GitHub issue

Hi, I am using redux-persist in my project.I am getting the below warning on using the PersistGate wrapper.

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in PersistGate (at App.js:97) in Provider (at App.js:96) in ApolloProvider (at App.js:95) in ApolloProvider (at App.js:94) in App (at src/index.js:7)

Also the app.js looks like:

export const App = () => { return ( <Fragment> <PersistGate loading={Loader} persistor={persistor}> //COMPONENTS </PersistGate> </Fragment> ) }

redux-persist version:6.0.0

Hope I can get some help. Thanks.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

3reactions
papbcommented, Oct 10, 2020

I believe the correct usage is loading={<YourComponent />} instead of loading={YourComponent}

0reactions
prox2commented, Dec 11, 2021

@kezarmader check loading={Loader} if you are returning null on Loader that is the issue, just try to get rid of the loading if you are not using it.

I am having same issue and also i tried removing loading prop as well as adding <Loader /> but non of both worked for me

Read more comments on GitHub >

github_iconTop Results From Across the Web

Redux Persist Gate on Nested persisted store - Stack Overflow
I'm trying to get Redux Persist Gate to work ... On every page. Whats the best way to deal with PersistGate and nested...
Read more >
Persist state with Redux Persist using Redux Toolkit in React
To use PersistGate , go to the index.js file in the src directory and add the following import: // src/index.js ...
Read more >
Persist Redux State with redux-persist - DEV Community ‍ ‍
Just like react-redux gives us Provider component that will wrap the whole app, similarly we get PersistGate from redux-persist.
Read more >
redux-persist - npm
If you are using react, wrap your root component with PersistGate. This delays the rendering of your app's UI until your persisted state...
Read more >
Usage Guide - Redux Toolkit
This lets you decide how to use these in your own application, whether it be ... and also that you get good default...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found