Stress Testing React Easy State

The Power of ES6 Proxies

Bertalan Miklos
Feb 1, 2018 · 4 min read

Last week I announced React Easy State: a state management library based on ES6 Proxies. The announcement mentioned something, which deserves an article on its own.

You just have to deal with plain objects and React components and let Easy State keep them in sync for you.

This was not a rhetorical statement, and I would like to prove it with a simple App.

This was the last none vanilla code snippet in the whole article. It creates a users array and exposes it globally on the window. Then UsersApp maps the array to a simple React view.

We will mutate the users array from the developer console in increasingly exotic ways and see how UsersApp react. Hint: it should automatically re-render when users are added, removed or modified.


#1. Warm up: Adding a new user

Let’s start by adding a simple user to the users array and then changing it’s email address.

Easy State knows that UsersApp iterates the users array during its render and it knows that user.email is rendered for every user. From this it deduces, that UsersApp should re-render after each operation.

If you feel like it, follow along with the live example app. Don’t be surprised, it’s an empty page. You can fill it with users from your developer console — like I did.

#2. Dynamic properties

The first example was not that impressive. Let’s see something that is exclusive to ES6 Proxies, by pasting these lines — one by one — to the console.

This time the new user was added by users[1] = newUser instead of push and at first it didn’t have an email. Adding new properties dynamically— like the email — can only be tracked by ES6 Proxies. Older state management libraries won’t re-render the app in these cases.

delete is another operation that was impossible to track until recently. Easy State re-renders the UsersApp if you delete a property which is used during its render.

#3. Property accessors and enumeration

It’s time to take a deeper dive. For this example we will need some preparation code.

Dave is a user with multiple email addresses. A property getter is used to dynamically generate his email, by enumerating the emails object and constructing a string from it.

Easy State knows that Dave’s email is generated from all of the properties in his emails collection. If a new email is added to the collection, it re-renders the UsersApp to reflect it. The same happens when an email is deleted.

#4. The final boss: Inheritance

Let’s see what happens if we throw in prototypal inheritance to the mix. This example will also need a preparation script.

John — the new user — inherits his name and email from Ann — the second user.

  • If we delete John’s name, it falls back to Ann because of the inheritance.

Easy State re-renders the App after each of these operations — since all of them results in a different view.


Conclusion

The above examples feature basic JavaScript operations and patterns, that most people don’t even consider for state management. I think that part of the reason is the added complexity from third party state management APIs.

By using Easy State you can focus your brain capacity on inventing your personal, reusable and pure JavaScript patterns, instead of learning new APIs and concepts.

If you enjoyed this article please check the Github repo of Easy State and leave a star before you go.

Thanks!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store