Replacing componentWillReceiveProps react lifecycle method with componentDidUpdate

[mateotherock]

Hi! I'm still a noob and could very well be missing something with the usage, but please bear with me. I am in the process of updating an older react application which includes replacing the componentWillReceiveProps lifecycle method. The entire application relies on Aphrodite for styling and generally the components have 'const styles = (args) => StyleSheet.create({ all the styles }) and then declare 'this.styles = styles(theme, width, etc.)' in the constructor. They then listen for props changes to those same arguments (theme, width, etc.) in the componentWillReceiveProps method and again call 'this.styles = styles(nextProps.theme, nextProps.width, etc.)'. The problem I think I am running into is that CWRP runs BEFORE render so it of course works just fine as it is now when things like the theme are changed or what have you because it can take those new props and update the stylesheet before the render method happens. However, when I move that logic to the componentDidUpdate which runs AFTER render it seems that none of the styles from the new theme are applied. I'm thinking either I am missing something in how I am supposed to be using Aphrodite (and perhaps the people before me who built the application did also) or perhaps there is a much cleaner way of doing this?

[Brianzchen]

I believe your old codebase has been using aphrodite wrong this whole time. You don't need to add styles in componentWillReceiveProps.

Firstly, I would ask are you using styles anywhere outside of the render() function? If not then just move your styles creation to render() like so,

class Comp extends React.Component {
  render() {
    const styles = (args) => StyleSheet.create({
      something: {
        width: this.props.width,
        // ... and anything else
      },
    });

    return (
      <div className={css(styles.something)} />
    );
  }
}

If you are assigning styles to this.styles because you have some other use case for styles besides rendering components then I would ask what that is and we can figure that out. Otherwise there's no reason to use more methods and overcomplicate your styling solution.