If you are more of a visual learner I created a video explaining how the bridge works, watch here: https://youtu.be/TU_kTuz2i9Y
Okay, so we know how layouts are defined at startup but what happens after the app is up and running? what if we want to disable a button? Does that information get sent along the bridge?
To disable a button we can set a property on the JS side which will be sent over the bridge as a serialized JSON object. Updates to native views are batched together and sent over to the native side at the end of each iteration of the event loop.
You get the same performance problems when running complex animations too. For example, typically a device runs at 60 frames per second which gives it that smooth lifelike feel. After one "frame" is shown you have roughly 16 ms to run code and display the next frame. If you take too long then the frame is dropped and your app appears unresponsive or laggy. With complex animations, it's best to stay on the UI thread as much as possible.
So that's how the bridge works. Facebook is well aware of some of the performance hits of using the bridge. They are working on a whole new architecture for React Native that eliminates the requirement to use the bridge.
As of the time of this article, JSI is mostly stable but still needs some improvements before being production-ready.