Enhancing Performance in Dashtoon Studio: A Leap from 8FPS to 55FPS

Hey There, Everyone!

We've got an exciting story for you! In just one week, our team turned our comic creation tool, Dashtoon Studio, from kind of slow (think 8FPS slow) to super speedy (a whopping 55FPS!). Want to know how we did it? Read on!

Some Context

Behind the scenes, we use Tldraw (tldraw.com) for its impressive functionality, which served as a solid starting point for our project. However, customizing Tldraw to meet our unique needs, especially in terms of canvas state management, proved to be a significant challenge. Achieving a balance between our specific requirements and Tldraw's existing features required a thorough understanding of the library, but even so, we encountered some challenges.

The Problem: Dashtoon Studio, our platform for making comics with AI, was moving like a snail. When our canvas got filled up, the whole thing would just crawl. Not good, right? We knew we had to fix this, and fast!

FPS Comparison

Our Super Busy Week of Fixes

1. Making Our App Smarter with Redux

No More Useless Chatter

• What Was Wrong: Our app was updating too much and causing a lot of unnecessary work.
• What We Did: We optimized the way how we were using Redux to make our app smarter about updates. It stopped bothering every part of the app unless it really needed to.

Remembering Stuff to Save Time

• What Was Wrong: Our app parts were redoing stuff they didn't need to.
• What We Did: We used some tricks with React.memo, useMemo, and useCallback to help our app remember things better, so it didn’t redo work.

2. Smoothing Out Interactions on the Canvas

No More Jumpy Interactions

• What Was Wrong: Drawing or Dragging on our canvas was all jerky and not smooth.
• What We Did: We made this debounced custom hook that made every move on the canvas smooth and nice.

Handling Inputs Better

• What Was Wrong: Our app was getting overwhelmed with too much input.
• What We Did: We used useCallback to make it chill and only deal with what was important.

3. Custom Hooks: Streamlining Components

Unburdening Components

• What Was Wrong: Components were overloaded with too much logic and state.
• What We Did: We developed custom hooks for specific component needs. This helped isolate and manage state and effects where needed, making components lighter and faster.

4. Canvas Element Positioning

Stabilizing Moving Elements

• What Was Wrong: Elements using transform were causing unnecessary re-renders.
• What We Did: We switched these elements to fixed positions, cutting down on the re-renders and enhancing performance.

5. Smarter Auto-Save

Auto-Save That Actually Makes Sense

• What Was Wrong: Our app was saving stuff too often, even when it didn’t need to.
• What We Did: We made our auto-save feature only kick in when it really needed to, by checking for actual changes.

6. Trimming State Data

Clean Up Our Data

• What Was Wrong: We had too much unnecessary stuff in our data.
• What We Did: We got rid of the clutter and made sure we only kept what we needed.

7. Updating the Canvas Only When Needed

Smart Canvas Updates

• What Was Wrong: Our canvas was updating too often, which was slow.
• What We Did: We got smarter about when to update the canvas, which helped speed things up.

The Results

After a week of hard work, we didn’t just make small changes; we totally transformed Dashtoon Studio! It went from being slow and frustrating to fast and fun.

What We Learned

• Keep an Eye on Things: It’s super important to regularly check how things are running, just like you’d check your car.
• Fix the Right Stuff: Like being a detective, we found what was really causing the problems and fixed those things.
• Keep It Simple: We made sure not to make our code too complicated while making these fixes.