I created a simple presentation involving live coding on stage to talk about handling cross-cutting concerns in React when writing components. React has a long and rich history of dealing with them. It's an interesting topic to take up, as it does come up while coding anything more complicated and can have a tremendous impact on code maintenance.
In the end, the simplest solutions won and those that were supported by the language for a long time. But before that happened, developers had to explore them better and get accustomed to them.
The following animation depicts what is created on every rewrite of the code - a simple website with a two components adjusting to their containers. Both share a piece of code (this is where the cross-cutting concerns issue comes into play) responsible for informing about the amount of available space for an element and letting them adjust their style live to that information.
