DEV Community: Paweł Sułkowski

useSelector performance pitfall

Paweł Sułkowski — Sat, 02 Mar 2024 14:09:19 +0000

I used to think of Redux as a straightforward state management tool: dispatch an action, reducer updates the state, and components re-render. That mental model served me well — until our app grew to handle a surge of customer data and real-time collaboration features. Suddenly, the performance took a nosedive.

Diving deep into the problems, we traced several bottlenecks. One surprising finding was in how Redux’s subscription works. Each time we used useSelector, we essentially told Redux, „Hey, keep me updated on any change in the store“. This was significant because as our app scaled, the number of subscriptions and frequency of updates led to a cascade effect of executing dozens of selectors.

After looking closer into them, we uncovered a few culprits:

We under-utilized memorization; Some selectors repeatedly performed costly operations by iterating over extensive collections to filter and combine data.
For parametrized selectors, we didn’t use memorization properly (nuances of reselect vs. re-reselect).
Array-based approach for collections wasn't optimal for lookups (e.g., finding objects by ID).
Over-fetching data, and not cleaning up the state after changing contexts resulted in bloating the store with unused data.
Selectors were running even for off-screen elements.

Once we knew types of our issues, it was relatively easy to come up with solutions to improve the situation. Here is the list of the main changes we've introduced:

More extensive use of reselect and re-reselect to avoid redundant computations and to account for selectors returning new objects by a reference.
Refactored store away from arrays, adopting a key/value structure for faster lookups by ID.
For real-time updates, we throttled them and combined into batched updates to avoid dispatching sequential, and atomic updates.
Started fetching data more conservatively to avoid storing data our users don’t need.
Last but not least, we hid off-screen elements to reduce active subscriptions.

Lessons

Performance optimization is a complex puzzle, and solutions often depend on multiple factors. In our case, taking a step back to gain a holistic understanding of our tools, system, and usage patterns was the key to identifying and implementing effective optimizations.

I hope you find it useful! 🙂

My journey to better lightning talks

Paweł Sułkowski — Mon, 20 Nov 2023 18:43:42 +0000

TL;DR: By focusing on a clear structure, big picture, storytelling, minimalistic design, and limiting technical details, I improved my lightning talks by making them more practical and engaging.

Context

In my previous projects, our team regularly organized lightning talks where we shared knowledge about tools, technologies, and projects we'd worked on.

Although I was eager to share my knowledge, my presentations were often overloaded with details, ran over time, and I was losing team's attention and interest.

Recognizing this, I decided to take a step back to find a better approach. Through experimentation, I found a few steps that helped me more effectively convey my thoughts and knowledge.

Solution

I start by defining key points to share and structuring them to ensure the content is understandable and easy to follow.
Next, I break down things into layers, processes, workflows, and systems, then showcase how they fit together, exchange information, and change their state. Even though I like jumping into details, I realized that in most cases focusing on the big picture is more helpful.
When designing a presentation, I limit myself to simple elements like text or stickies and a few colors, like shades of grey, to ensure my focus is on the content, not the layout or fancy effects. I'm also a huge fan of whiteboards, so whenever possible, I use them as my go-to tool as they give me freedom and flexibility in my thinking and design processes.
Once I have the content, I figure out how to turn it into a story, where I gradually reveal its details. It's meant to avoid cognitive murder, help absorb the content, understand the topic, and keep the team curious and engaged.
Finally, while sharing technical details is essential, code examples are often unnecessary. But, if they are a must, I reduce them to the simplest possible version.

Final thoughts

Focusing on improving my lightning talks helped me in more ways than expected. Not only did my presentations improve, but these changes also made a difference in my daily work, in how I work on projects, but also in how I communicate with the team.

While these methods have been particularly helpful for me, it's important to remember that there are many ways to prepare and run presentations, and what works best can vary from person to person.