Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for higher-order-components such as recompose

See original GitHub issue

A pattern that I tend to use is the following:

import React from 'react';
import { withState } from 'recompose'; // or any of the HOCs from recompose

const enhancer = withState('value', 'setValue', 0);
const MyComponent = ({ value, setValue }) => (
    <span>Value: {String(value)}</span>
    <button onClick={() => setValue(value + 1)}>Increment</button>
export default enhancer(MyComponent);

Because MyComponent is not being exported as a const or default, it is not being picked up by babel-plugin-functional-hmr.

Is there a way I can adjust my pattern or is there something that could be done regarding babel-plugin-functional-hmr to get this experience working with HMR?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

ckknightcommented, Mar 9, 2018

@Gyran Thank you, this is working like a dream.

Gyrancommented, Mar 9, 2018

We have a branch that supports that pattern ( I’m not sure that it works 100% but it works good enough for us. If anyone want to continue to work on it I’d be glad to help.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using Recompose to build higher-order components
Recompose is a toolkit for writing React components using higher-order components. Recompose allows us to write many smaller higher-order ...
Read more >
Using Recompose to write clean higher-order components
Learn how Recompose methods can help create cleaner HOCs and how it simplifies the development and organization of React components.
Read more >
acdlite/recompose: A React utility belt for function ...
Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React.
Read more >
Typing Higher-order Components in Recompose With Flow
One month ago Recompose landed an official Flow library definition. The definitions were a long time coming, considering the original PR was ...
Read more >
Getting started with Higher Order Components and ...
Higher order components (HOCs) are functions that take a component and return another. The returned component is altered, typically, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found