Discussion on: How to mimic componentDidUpdate() with React Hooks

View post

Replies for: Exactly, rely on data values ans data changes instead of component lifecycle. It seems to be the way hooks are designed. Actually all your props s...

I like that approach

I'm still struggling with this approach. I have a really basic Class Component that calls an action creator (which is passed as a prop) if a particular prop is true and if another prop has changed, but only if that second prop isn't being changed for the first time.
The suggestion in the article by @savagepixie got me around my issue, but I can't see how I could use @devdufutur 's suggestion (which sounds sensible but unachievable in my use case!):

import React from "react";

export default class RequireLogon extends React.Component {
  componentDidUpdate(prevProps) {
    if (
      this.props.isLoggedIn &&
      this.props.logonExpiresAt &&
      prevProps.logonExpiresAt !== this.props.logonExpiresAt
    ) {
      this.props.loadPermissions();
    }
  }

  render() {
    return this.props.children || null;
  }
}

Any suggestions?

Rudy Nappée • Aug 23 '20 • Edited

I guess your RequireLogon component could have been a custom hook...

function useRequireLogon(isLoggedIn, expiration, loadPermissions) {
  const refExpiration = useRef(expiration);
  useEffect(() => {
    if (isLoggedIn && expiration !== refExpiration.current) {
      loadPermissions();
    }
    refExpiration.current = expiration;
  }, [expiration, isLoggedIn, refExpiration]);
}

shiraze • Aug 23 '20

I like that, primarily because what I had wasn't a "component" as such, but some sort of rule. This is certainly cleaner code. Thanks!