Skip to content

Instantly share code, notes, and snippets.

@nishithMobinius

nishithMobinius/.md

Created May 13, 2020 06:33
Show Gist options
  • Save nishithMobinius/501eda535bc99a9d2e532c68238d78e8 to your computer and use it in GitHub Desktop.
Save nishithMobinius/501eda535bc99a9d2e532c68238d78e8 to your computer and use it in GitHub Desktop.
Download ZIP
concurrentmode-experiment
Raw
.md

Design Sketch: Design to impliment React Concurrent Mode and its efficiancy

Background

To Make Better UI experience for clients with Priority DOM and state updates using React concurrent mode

Problem

Due to current high speed internet network and high performance machines, it feels redundant of several DOM updations like rendering Loading symbol while api calls and rendering unwanted chunk of data to DOM for operations like Autosuggestion feild showing suggestions according to user input

The solution mentioned below showcases the way forward in closing this issue.

Principles

React is giving a better way of solving above mentioned UI related issues, with async rendering of DOM based on user events. React has released it first ever concurrent mode feature for all it's early bird adopters

Constraints

As asych rendering of DOM elements is a new experiment to the front-end world, and as this is still in experimental mode, there are light chances concurrent mode does not reach the market

Assumptions

There will continius internet connectivity with the application

Acceptance Criteria

The standard of code does not breach or violate any standards set by React Community, and does not break the application at any given condition. Usage of the Concurrent mode gives enahancing User Experiences to client by eliminating unnecesary loader splashing and eliminatingunwanted DOM updations especially repeated DOM updates based on user input Lesser code, Cleaner code with much more advanced User Experience

Performance 

As number of DOM updations are less, and less code written to manager Loading state of React component, there is real surge with the application performance

Expected Workload

The library would be expected to be used and called as often as required and the workload would be smaller since the data packets passed and received would be smaller.

Solution

Using React Concurrent mode, would definetly reduce all the code chuks handling the loader part and resolves the splashy loading and gives buttersmooth user experience

Limitations

As this is still in experimental mode currently, would be unpredictable of it's features when coming to release

Alternatives

Asych DOM updation is purely one of a kind, there are no alternatives features offering from any other framework

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment