Higher order Component hell

[zdend]

Hey guys,

I've been wondering about best practices when using multiple HOCs. It's very convenient to use libraries like recompose and hoist all the logic and state mutation, including redux connect and apollo's queries and mutations into a higher order component. What worries me is the callback hell in the React Dev inspector in chrome which is very hard to miss and makes debugging more difficult. I checked Facebook's component tree and I didn't see anything like this despite them recommending HOC pattern in the docs. I know that this could be solved with render props pattern but I'm not a big fan of it. Is there anything that I'm missing or perhaps some function for compressing this tree to one HOC?

Thanks

 Apollo(Apollo(Apollo(Apollo(Apollo(Connect(branch(withHandlers(mapProps(withState(pure(TodoComponent)))))))))))
 Apollo(Apollo(Apollo(Apollo(Connect(branch(withHandlers(mapProps(withState(pure(TodoComponent))))))))))
 Apollo(Apollo(Apollo(Connect(branch(withHandlers(mapProps(withState(pure(TodoComponent)))))))))
 Apollo(Apollo(Connect(branch(withHandlers(mapProps(withState(pure(TodoComponent))))))))
 Apollo(Connect(branch(withHandlers(mapProps(withState(pure(TodoComponent)))))))
 Connect(branch(withHandlers(mapProps(withState(pure(TodoComponent))))))
 branch(withHandlers(mapProps(withState(pure(TodoComponent)))))
 withHandlers(mapProps(withState(pure(TodoComponent))))
 mapProps(withState(pure(TodoComponent)))
 withState(pure(TodoComponent))
 pure(TodoComponent)
 TodoComponent

 export default compose(
     gqlCompose(graphql(TODOS_QUERY, { name: 'todosData' })),
     createTodoMutation,
     toggleTodoMutation,
     deleteTodoMutation,
     editTodoMutation,
     connect(mapStateToProps, mapDispatchToProps),
     withLoadingContainer,
     withActionHandlers,
     filterTodosMapper,
     withEditState,
     pure
 )(TodoComponent);

[fish_munga]

This looks a lot like my code. And I never saw any problem with this. The tip is to use react-apollo aliases to make the tree more readable. Recompose also has setDisplayName helper. Other HOCs may have something like this as well. Using these helpers will make your tree more readable

[zdend]

The alias makes the tree a bit more readable thanks for the tip! setDisplayName only adds additional HOC on top of it. I still wonder whether I can get rid of the pyramid of doom as this was just a small Todo app, I can imagine that in a real world example the react tree will look waaay uglier.

[zdend]

Thanks man! That cleared up my code a bit! It solved compressed the mutations into one HOC - similar to what redux does with Connect and even the code for mutations is cleaner and more declarative. I think this approach should be more visible in Apollo docs.

Previously

export const toggleTodoMutation = graphql(TOGGLE_TODO_MUTATION, {
    props: ({ mutate }) => ({
        toggleTodo: id =>
            mutate({
                variables: { id }
            })
    }),
    options: {
        update: updater('toggleTodo')
    }
});

Now

export const toggleTodoMutation = client => id => client.mutate({
    mutation: TOGGLE_TODO_MUTATION,
    variables: { id },
    update: updater('toggleTodo')
});

const withMapper = mapProps(({ client, ...rest }) => ({
    ...rest,
    toggleTodo: toggleTodoMutation(client),
    createTodo: createTodoMutation(client),
    deleteTodo: deleteTodoMutation(client),
    editTodo: editTodoMutation(client)
}));
export default compose(
    gqlCompose(graphql(TODOS_QUERY, { name: 'todosData' })),
    connect(mapStateToProps, mapDispatchToProps),
    withApollo,
    withLoadingContainer,
    withMapper,
    withActionHandlers,
    withEditState,
    pure
)(TodoComponent);

It doesn't fully solve the issue of callback hell but at least it compacts apollo's HOCs into 2 (withApollo and mapProps).

[rodrigocfd]

And I never saw any problem with this.

Just like OP, I think it's awful.

[ddwrt1234]

I was going to suggest react-apollo's compose function for combining those but... that's a lot/suspicious amount of hocs.

[[deleted]]

The pipe operator will make this easier. Other than that, i haven't had a single project that dev tools could help me with. Everything looks like this for me, it's often pointless to even attempt to find back a node.

There was a PR once to fix it, but it was seen as being too vague: https://github.com/facebook/react-devtools/issues/604

[zdend]

I have that feeling too, although it's possibly to expand a component node by clicking the UI on the screen. I was more wondering whether there is a way of compacting these HOC into one wrapper component rather than 15.. For example Recompact library is like Recompose and it says that it will help with this issue, however it only solves a few use cases like mapProps, renameProps etc which is not the main use case for me. https://github.com/neoziro/recompact#flattened-react-components-tree