1

I'm trying to use the new getDerivedStateFromProps lifecycle method in my React Native component but the method never gets called. I've tried looking it up but found no issues in the react-native repo. No results on StackOverflow or Google either.

What I did find are a reddit thread and a StackOverflow issue which both cite updating react-dom as a solution, which would not work in this case since there's no dom in React Native.

Can anyone confirm if this method is supposed to work in React Native? If it can be used, any help with solving this issue will be much appreciated.

Below is a simplified version of my component:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { Auth } from '../redux';
import ChillaAPI from '../api';

const withUserData = WrappedComponent => {
  class UserDataLoader extends React.Component {

    static getDerivedStateFromProps(props, state) {

      console.log('getDerivedStateFromProps');

      if (props.uid !== state.uid) {
        return {
          uid: props.uid,
        };
      }

      return state;
    }

    state = { uid: null };

    render() {
      console.log({ propsUid: this.props.uid });
      console.log({ stateUid: this.state.uid });
      return <WrappedComponent />;
    }
  }

  UserDataLoader.propTypes = {
    uid: PropTypes.bool.isRequired,
  };

  return connect(mapStateToProps)(UserDataLoader);

};

function mapStateToProps(state) {
  return {
    uid: Auth.selectors.getUid(state),
  };
}

export default withUserData;

The log output from the component is as follows:

{ propsUid: null }
{ stateUid: null }
{ propsUid: 'jW78ej3JDgPpheadAlcrkG8UIZB2' }
{ stateUid: null }

Here is my package.json for good measure:

{
  "name": "Chilla",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "start:reset": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
    "watch:lint": "node node_modules/eslint-watch/bin/esw -w",
    "test": "jest",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "node_modules/.bin/prettier --single-quote --trailing-comma es5 --write",
      "eslint",
      "git add"
    ]
  },
  "dependencies": {
    "axios": "^0.18.0",
    "firebase": "^4.13.1",
    "husky": "^0.14.3",
    "lint-staged": "^7.0.4",
    "prop-types": "^15.6.1",
    "react": "16.3.1",
    "react-native": "^0.52.2",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-image-picker": "^0.26.7",
    "react-navigation": "^1.5.11",
    "react-redux": "^5.0.7",
    "recompose": "^0.27.0",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-react-native": "^3.2.1",
    "eslint-watch": "^3.1.4",
    "jest": "22.4.3",
    "prettier": "^1.12.1",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}
user2634633
  • 509
  • 8
  • 21
  • 1
    I can confirm that the static function getDerivedStateFromProps() works in react-native as expected, I am using it since I refactored my code after the react v16.3 update. I can't really see why it's not working for you. I assume you double checked the spelling in your editor and confirmed that react v16.3.1 really is installed and compiled? If you are using a simulator you can also try deleting the app and do a re-install. Helped my on several occasions at least ... – dentemm Apr 30 '18 at 18:31
  • @dentemm I did all that. Now that I think of it, it's probably my version of `react-native`, I'm on v0.52.2. Could you confirm you're using at least v0.55.0? – user2634633 Apr 30 '18 at 19:16

1 Answers1

2

Updating to react-native@0.55.3 solved this issue

user2634633
  • 509
  • 8
  • 21