Event Emitter instead of lifting state up in React
Everybody knows lifting state up hell in our small applications. Where Redux or different state manager that is too much. But without that when we want to sharing state for distant component. We have to find the closest common ancestor and next passing through all descendant components till state will be pass to proper.
Unfortunately, when that situations will be frequent application will become unmanaged, components huge and code dirty :(
How to resolve it in clean way? Keeping components clean and managed.
Event Emitter is the answer. Very popular library from node.js.
Event Emitter is useful library in React apps
Event emitter has some useful functions:
- on, adds listener and start listening on specific events,
- once, like above but after first event occurence is removing,
- off, removes listener for specific event type,
- emit, invokes event and can add payload when is needed.
Event Emitter in sample how to sharing state in clean way
Let’s arrange completely senseless business requirement to present Event Emitter in action :) Assume we have three parts of view: header, sidebar and main. In main view we have input text element and button. And after click we want to pass value from input element to sidebar and header. Additionally header react only on first click. Finally, new value in header and sidebar presents on view.
In React applications without any state library (e.g. Redux) we should find the closest common ancestor where we will keep state and keep handling function for click. Next pass handling function and state from ancestor to main, sidebar and header and connect them in that components. Then in header component add some logic to handling only first state change.
Do we can make it simpler with Event Emitter? Exactly we can. Take a look on below React sample. For simpler instance we won’t pass state for indirect descendant components.
At first install Event Emitter and create singleton pattern for it with four core functions.
Next we will go to main component and implement logic for Event Emitter. When button is click then trigger event ‘INPUT_FROM_MAIN’ with value from input will be broadcast to all Event Emitter listeners. But where they are?
First is in sidebar component and it starts listening in componentDidMount on ‘INPUT_FROM_MAIN’ events. And passed function to handling when event appears.
Don’t forget to remove listeners of Event Emitter at the end of lifecycle of components. Memory leaks and etc. are difficult to debugging ;) So in compomentWillUnmount clean up Event Emitter listener.
In header component code is similar but we are using different function for managing Event Emitter listener.
So, that’s all. I hope Event Emitter help you coding better and cleaner solution in React applications.
I believe Event Emitter is powerful library so you will find some other solutions in React and Javascript world where Event Emitter will be the best answer.
Try to use Event Emitter in real React application
All code based on create-react-app is ready to test. You can explore or clone it from github.
If you like this Event Emitter solution, like it here or on gitHub, please. Thanks :)
I wish pleasant coding in React apps with Event Emitter!
Mir i sława!
