- #MOBX VS REDUX HOW TO#
- #MOBX VS REDUX UPDATE#
- #MOBX VS REDUX SOFTWARE#
- #MOBX VS REDUX CODE#
Cancel a React Modal with Escape Key or External Click. #MOBX VS REDUX CODE#
Continuous Delivery With GitOps (Using Kubernetes): Concepts + Code Walkthrough. First Look: The Jakt Programming Language. #MOBX VS REDUX HOW TO#
Top AppDev Security Mistakes (And How To Avoid Them). Educational Services – Hands-on technical training for development teams, taught by practitioners. Technology Consulting – Dedicated consultants sharing specific expertise on a project basis. Digital Transformation – Helping clients embrace technology changes-from analysis to implementation. 
#MOBX VS REDUX SOFTWARE#
Application Development – We’re a team of developers creating full-stack software applications. Our team is singularly comprised of software developers and architects-they are elite, vetted employees with strong histories of client acclaim. Looking of help with react performance? Send me a message.We build custom software solutions that solve complex business challenges. Question: what is the best way to apply something similar if you are using pure setState or redux architecture? I didn’t have anything beautiful in mind, do you? And I didn’t move rendering of all of these properties into separate components. In my case one item element has many properties (index, text, start time, end time and many other). Performance improved A LOT with this simple refactoring.Įvery time you want to fix performance of a web-app remember to be smart and measure the performance. Notice that this approach will not work, if you will use index directly here, like BUT child component will be updated (directly and very fast), because it listens to changes of “index” property. So when I updated the index this component is not updated (it doesn’t observe that changes). What did it change? In this case I am not using “index” property directly inside item render. Let us create special component for displaying JUST index:Īnd then we will use this component inside render of whole item: “index” property changed - component updated.īut here is quick and simple fix. Mobx-react automatically track usage of properties in render function. This is how part for render function was looking before changes: #MOBX VS REDUX UPDATE#
So I thought: I need to update item element but how to update index directly without calling render of the whole caption? The cool thing about it is observable values and ability to create React components that OBSERVE changes. In that project, I was using mobx for state management.
So I continued to think about a faster solution. As I have some legacy code, this change may take too long time to implement and test and it may break the app in some cases. To calculate correct scrolling position I needed all elements to be in the DOM (otherwise calculation is too complex).
But, the app has some features about scrolling list in several conditions. I started to think to use react-virtualized for hiding invisible captions. This operation tooks long time because one caption component has many elements inside. It needs to call render for each element, it needs to create a new tree of virtual DOM and it needs to calculate changes and it needs to apply them. Even if react didn’t need to touch a lot of elements (pfuuu, just several hundreds), it needs to do a LOT of work under the hood. It may still look strange why updating of indexes is slow. So when you delete the first caption, indexes of all other captions need to be updated.Īs a proof I deleted the last element, it was very fast. You may ask why, if it is just deleting? The thing is - each caption should show its index (see in top left). Why was it slow? After some investigation, I found that React has to rerender ALL captions on delete. I noticed that this operation was VERY slow. Until I click “delete” button of the first caption. The app was not fast, but it was working good enough. The project had several hundreds of captions. One day I have loaded large projects into the app. So you have a video, you have list of subtitles and you want to edit them. It was captions (subtitles) review tool for videos.
I was building web-based application for a client. There is my short story about how I improved performance of the web-app by 10x with just a simple trick.
0 kommentar(er)
