Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Add Lifecycle Hooks to a Functional Stateless Component using Recompose

    Tim KindbergTim Kindberg

    Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a class component.

    reactReact
    ^16.0.0
    recomposeRecompose
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 I'm going to write a higher order component called withConfig, and it's going to use the lifecycle Higher Order Component, from Recompose. It's essentially an escape hatch to the full React createClass API, except for the render method, which is not allowed.

    00:16 I'm going to listen on componentDidMount, and the point of my withConfig higher order component is to fetch a configuration. I'll listen on this config promise which contains the data I need, and then I'll set the state to the config.

    00:38 It's important to note that anytime you use setState inside of lifecycle, the state actually gets converted to props when it gets passed into the wrapped component. I'll show that more in a second.

    00:50 I'm also going to use getInitialState so that I can return an empty config. I've mocked out a configuration, so I just need to call this fetchConfiguration method, and it's going to return to me this config object.

    01:09 They're currently turned on because I'm actually passing them in as props to my dumb component. I'd like to be able to delete this completely and just have my configuration take care of it.

    01:22 Now they're gone, and we'll replace it with my higher order component. Let's make a call to fetchConfiguration and store it in the config promise that my component didMountHook is listening on.

    01:37 I want to make sure this is only called once for the entirety of my application. That way if multiple components use this higher order component, they won't each trigger a network call. That's why I do it outside of the higher order component.

    01:52 Now. I'm going to wrap user in the withConfig higher order component, and I'm going to replace these two config properties with just config, which we're getting from this setState call, which, as you remember, gets passed in as a prop, not as state, since functional stateless components don't have state.

    02:17 On the config, there's a show status, so I'm going to add config. in front of that. There's also a canDeleteUsers, so I'm also going to prepend config. there, as well. Should be able to refresh, and we have our options back. We can now change them, and we can see that they're going away.

    02:44 Lastly, I just want to note that any hook can be used here, as I had said. That includes things like shouldComponentUpdate or componentWillMount, etc.

    Discuss

    Discuss