Pierre Hedkvist

Context in React creates a global state for a tree. It gives the ability to pass data from a parent component to child component without passing props between several layers in a tree.

Passing props from a parent component to child component via multiple components in-between is called prop drilling. Generally, this is an anti-pattern. In the following example, you can see that data is passed through several layers until its being used.

Collaborative editing allows users to work together in real-time, despite being in different parts of the world. Resulting in great products such a Google Docs and Live Share in VS Code. In a time were remote work is becoming more and more common, tools like these are off increasing importance.

Although writing your own editor can be rewarding, it certainly requires a great effort to get right. CKEditor had 25 developers working on their editor, and I am sure the team behind Google Docs had plenty of skilled developers as well. Luckily, open source collaborative editors exist. And to my surprise, these were easy to get started with. 🤯

In our day and age, people are able to work together despite being in completely different parts of the world. Writing is central to most businesses today, and products like Google Docs makes it possible to collaborate with ease. I will explain how it's possible to create a collaborative editor that can guarantee consistency.

What makes a collaborative editor different than regular ones is that they are able to keep a consistent state, even though multiple users are typing simultaneously. Even if multiple users are hammering away, smashing their keyboards, the state is kept consistent.