State Management in React with Christopher Chedeau
Have you authored a State Management library?
Yes. Animation is entirely State. Moving from State to State in a fluid manner, dealing with interruptions.
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain.
Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution.
The notion of physically-based animation.
- Physically-based animation is an area of interest within computer graphics concerned with the simulation of physically plausible behaviors at interactive rates.
- Native applications are using "springs." Similar to a real springs (physically-based animation). It feels more real life, and it the way how iOS has implemented animations.
- Problems occur when you need to apply this on the framework level.
If an animation is interrupted, it will result in a choppy animation. This is due to JavaScript being single-threaded.
- The way native platforms are solving this problem is by moving this process to a different thread.
- What we have done for Animated is that you define the animated values, then those values are sent to be computed in the dependency tree on a separate thread.
- Now the challenge is how do you make declaring animations easier.
Is there a correlation between State and the processes? What layer of State is that?
- The difference between Animated and Recoil lies in how you update the DOM elements.
- With Animated, we want to update the final DOM elements.
- Recoil is a very low level of that implementation. You need to have find grain dependency management.
- Recoil works and thinks like React. It uses the React component states and updates them.
- The atomic unit that you are working on now is a React component.
- You don't have to invent your own implementation. You can directly target specific React elements without reloading the entire tree.
What collaboration and resources came to inform this solution?
- Animated didn't inspire Recoil. The actual libraries are really small. The problem is how you educate people to start working with these libraries.
These are complex problems. What are the common patterns when solving State Management?
- Recoil got inspiration from React Hooks.
- With Recoil, you are able to do the same thing as useState but also have access to a regular JavaScript object that you can pass around.
- This has the benefit in that you no longer need to take over the whole JavaScript bundle.
What are the types of State that you have in an application?
- The first phase of State is the external data source that you get from the server.
- For this type of State, Relay and GraphQL are excellent solutions. GraphQL is declarative. Relay handles local caching - transferring data between minor updates. And Relay is a superb solution to update specific components.
Why is Relay not the go-to solution?
With Relay, you need to have a GraphQL backend. No easy way to create an integrated compatible backend solution.
At a conceptual level, we can think about Relay, GraphQL, and Apollo as the same, but at the implementation level, they differ from each other.
At the end of the day, the technology that you choose to work with will create constraints for your application.
How you fetch data will affect the rest of your application.
Gatsby uses a Relay-like implementation to build the Graph from 20-something data sources - but they make that invisible when building those structures.
Another type of website is CRUD apps that want more complex forms. There are no good solutions to manage forms. In the past, Redux was used, but it didn't solve the problem.
PHP, Rails, WordPress let you generate forms and manage them nicely on the backend.
Recoil solved problems for Formik. Managing states and updates in nested forms.
Have you ever explored Falcore?
Yes. Falcor is a real-time rendering framework supporting DirectX 12. It aims to improve the productivity of research and prototype projects.
The idea with Falcor is that we can do the same thing without having a solid schema (Dynamically importing REST points.)
This solves the same issues when managing State, and it lowers the barrier of entry.
What State Management problems did you run into when building Excalidraw?
- The initial plan was to use Recoil. The solution was to create one JSON file to manage the state. Then re-render the whole tree.
- It worked pretty well until we wanted to update different parts at different rates. We wanted the interaction to be faster and making caching easier.
- Recoil would have handled this for us, but we took a different approach; we started building tooling with pure React and JavaScript.
- We didn't want to add additional features that would make it slower.
- We implemented the core features from other libraries to avoid adding additional dependencies.
- This is a design feature; you can start designing backward.
- Optimizing
- At WhatsApp, we optimize by writing small amounts of code and adding little to no dependencies.
- Facebook takes a different approach. They iterate fast, so they are implemented in multiple libraries.
- Both are successful but with different strategies.
When you are doing optimization at scale, is State Management part of that?
- State Management is part of the conversation. But it's not critical since this is not likely to change much.
- For example, when we re-wrote Facebook from PHP to React + GraphQL + and server-side rendering. The underlying architecture did not change much.
- To improve the performance, you need to measure it.
- Our team has focused on measuring performance in testing, production, etc. Once we have those measurements, we can start implementing tools to track performance.
- Many teams own different parts of Facebook. We take all of those metrics and put them in a program where executives can review the status.
- It's State Management at a business level. Everything is moving-different components.
- If you give a Metric to an engineer, they will drive it down. They are excited to make it fast. It's important to track it. If you want to improve performance, you need to track it, improve it, and show it to management.