I have been working on integrating recompose into my react codebase. As part of this process, I have been experimenting with getting some basic functionality to work. While I have made progress, I am uncertain if I am following the correct approach for using recompose.
Let me show you a snippet of my code:
interface Value {
value: string
}
interface Loading {
loading: boolean
}
const TestComponent = (props: Value) => <div>Value: {props.value}</div>
const LoadingComponent = () => <div>Loading ...</div>
In the code above, TestComponent is meant to display the provided value in its props. Additionally, there is a LoadingComponent that should be displayed when the loading prop is set.
To implement this functionality, I utilized the branch function from recompose
const withLoading = branch<Loading>(
({loading}) => loading,
renderComponent(LoadingComponent)
)
When I apply withLoading to any Component without props, I can set the loading prop on them.
const EnhancedCompWithLoading = withLoading(SomeCompWithoutProps)
render() {
return <EnhancedCompWithLoading loading={this.state.loading} />
}
This works well, but issues arise when trying to use this with Components that already have props. For example:
const TestWithLoading = withLoading(TestComponent)
render() {
return <TestWithLoading value="testVal" loading={this.state.loading} />
}
Upon attempting the above, I encounter the error message
TS2339: Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Loading, any, any>>
& Readonly<{ children?: ReactNode; }> & Readonly<Loading>'.This led me to inspect the type definition in @types/recompose. It appears that branch<TOutter> returns a
ComponentEnhancer<any,TOutter>The TypeDefinition for the ComponentEnhancer looks like this (recompose 0.30.2):
interface ComponentEnhancer<TInner, TOutter> {
(component: Component<TInner>): ComponentClass<TOutter>
}
Essentially, the
ComponentEnhancer<any, Loading>branch function will return a ComponentClass<Loading>. However, the <TInner> of the component provided to the ComponentEnhancer gets discarded, making it challenging to utilize the Value props in the Enhanced Component.
My question is whether I am approaching this incorrectly, if there is a better way to accomplish this with recompose, or if it could potentially be a bug in the TypeDeclaration. Changing the return of the ComponentEnhancer to
ComponentClass<TOutter & TInner>