I implemented a Pub/Sub pattern by using several component composition techniques: React.cloneElement, and functional "composed components." The goal in mind was to be able to dynamically enroll components into different flows of data by assigning them a "topic" prop.
For example, this component receives all data published to the HELLO_WORLD topic:
<MyComponent topic="HELLO_WORLD" />
Here is the inside of MyComponent expressed as a functional component:
export const MyComponent = props => subscribe(({ topic, data }) => {
return <span>I am listening to the {topic} topic. Current state: {data}</span>
}, props.topic);
Alternatively, here it is expressed as a class component:
class MyComponent extends React.Component {
render() {
const { props: { otherProps, topic } } = this;
return subscribe(({ data }) => {
return <span>I am listening to the {topic} topic. Current state: {data}</span>
}, topic)
}
}
As you can see, this pattern necessitated returning a Higher Order Component inside the render function. Do you think this falls into the caveat mentioned here?
Here's some more context:
The subscribe function returns a composed component:
const subscribe = (Comp, topic) => {
return (
<Subscriber topic={topic}>
<Comp />
</Subscriber>
);
};
Which wraps MyComponent in a Subscriber:
class Subscriber extends Component {
state = publisher.getState(this.props.topic) // get initial state
onMessage = msg => {
this.setState({ ...msg });
return this.state;
}
componentDidMount() {
this.subscription = publisher
.subscribe(this.props.topic, this.onMessage);
}
componentWillUnmount() {
publisher.unsubscribe(this.props.topic, this.onMessage);
}
render() {
const {
state: { data },
props: { children }
} = this;
return Children.map(children, child =>
cloneElement(child, { ...this.props, data })
);
}
}
The subscriber gets its state from the publisher, which caches topics:
const eventEmitter = new EventEmitter();
const publisher = {
subscribe: function (eventName, cache) {
eventEmitter.on(eventName, data => {
this.cache[eventName] = cache(data);
});
},
unsubscribe: function (eventName, fn) {
eventEmitter.off(eventName, fn)
},
send: function (eventName, payload) {
eventEmitter.emit(eventName, payload);
if (!this.cache[eventName]) {
this.cache[eventName] = { data: payload };
}
},
getState: function (topic) {
return this.cache[topic] || {};
},
cache: {}
}
The component profiler suggests that this setup is rendering very efficiently. Additionally, state is persisted in a cache outside of React land. If you ask me, it's pretty much just Flux with a twist. Your thoughts?
Your
subscribe()
is not a true HOC.Why ? ( concentrate on bold word )
subscribe()
is just wrapper Component which just wraps original component and return.Here is a detailed answer : https://stackoverflow.com/a/64178585/8323442