Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Add Lifecycle Hooks to a Functional Stateless Component using Recompose


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



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.