Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(HOCs): update Using UNSAFE_componentWillReceiveProps in strict mode warning with ^17.0.1 #1059

Open
LuisMerinoP opened this issue Jan 25, 2021 · 4 comments

Comments

@LuisMerinoP
Copy link

LuisMerinoP commented Jan 25, 2021

Bug report

Steps

Use firestoreConnect with react-redux-firebase@3.10.0 and react@^17.0.1 in a project with react strict mode.
Open your console to see the warnings

Expected Result

No warnings should appear even with react strict mode.

Actual Result:

    Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
    
    * Move data fetching code or side effects to componentDidUpdate.
    * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
    
    Please update the following components: FirestoreConnectWrapped(Dashboard)

This is the code producing the warning:

    [export default compose<React.FunctionComponent>(
      connect(mapStateToProps),
      firestoreConnect([
        { collection: 'projects' }
      ])
    )(Dashboard);

codesandbox link

@LuisMerinoP LuisMerinoP changed the title fix(HOCs): update componentWillReceiveProps to componentDidUpdate to prevent warnings with ^17.0.1 fix(HOCs): update Using UNSAFE_componentWillReceiveProps in strict mode warning with ^17.0.1 Feb 5, 2021
@nirmalhk7
Copy link

Is there any solution on this? Its stopping me from using Strict Mode on my React project, despite having latest react-redux-firebase.

@LuisMerinoP
Copy link
Author

I think that the options are to dive into the code and check if the HOC can be fixed and for pull request, wait until its fixed, which does not seem immediate, or use a react hook to set the listener to the database yourself, that would involve change the approach for that specific component to remove the usage of redux replace by a react hook...this involves also the presumable propagation of hooks usage in your app, as you will need to make this replacement for all the components that need to listen to the database info....

@mastercodingbear
Copy link

Is there any solution? I'm trying to maintain old projects and facing this issue.

@vlladislav45
Copy link

Hi, I have the same issue in React 18.2.0. I would like to know if this dependency will continue to refining, do you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants