Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(sdk): Improve useStorage and Optimistic revalidate effect #1186

Merged
merged 3 commits into from
Mar 25, 2022
Merged

feat(sdk): Improve useStorage and Optimistic revalidate effect #1186

merged 3 commits into from
Mar 25, 2022

Conversation

igorbrasileiro
Copy link
Contributor

@igorbrasileiro igorbrasileiro commented Mar 23, 2022 •
edited
Loading

What's the purpose of this pull request?

Improve the performance of useStorage hook.

How it works?

The useStorage hook has an effect that fetches an item from the indexedDB, then update an internal state with this item. So, exists two tasks, one is a micro-task because is a promise and the other one belongs to the same task. The problem is these two tasks sometimes can create tasks that took more than 50ms and are considered Long Tasks. Know this, this PR wraps the async promise and the set state inside a setTimeout. Why setTimeout, because it creates a new task. For more information about tasks and microtasks you can read this article

Take a look at the quantity of long tasks after the hydration
Before:
image
After:
image

Run PSI API for mobile 15 times and the result is this

Before: using production https://623b35ed844ee300083a6a4a--basestore.netlify.app/

Metric Mean Standard deviation
Cumulative Layout shift (CLS) 0 0
First Contentful Paint (FCP) 1374.77 41989.24
First Contentful Paint 3g (FCP) 2950.40 301420.73
Largest Contentful Paint (LCP) 2038.73 6.44
Time to Interactive (TTI) 3556.91 2587.85
Total Blocking Time (TBT) 381.35 1197.05
Performance score 0.889 0.000189
JavaScript Execution Time 1524.33 16593.14
Speed Index 2577.09 14417.72

Using https://sfj-86eb203--base.preview.vtex.app/

Metric Mean Standard deviation
Cumulative Layout shift (CLS) 0 0
First Contentful Paint (FCP) 1241.4360950543794 48858.223245183246
First Contentful Paint 3g (FCP) 2591.795666633926 346806.5173277669
Largest Contentful Paint (LCP) 2085.24143603237 620.4396250922497
Time to Interactive (TTI) 3448.2983300299215 17528.68604983101
Total Blocking Time (TBT) 395.70000000000005 40.56000000000141
Performance score 0.882 0.00009600000000000014
JavaScript Execution Time 1452.6079999999997 6068.96649600012
Speed Index 2755.665328848717 292407.41411333304

After: using https://deploy-preview-416--basestore.netlify.app/

Metric Mean Standard deviation
Cumulative Layout shift (CLS) 0 0
First Contentful Paint (FCP) 1192.30 22365.39
First Contentful Paint 3g (FCP) 2377.30 89280.68
Largest Contentful Paint (LCP) 1912.85 12547.15
Time to Interactive (TTI) 3244.72 4820.48
Total Blocking Time (TBT) 354.77 1982.53
Performance score 0.891 0.000099
JavaScript Execution Time 1397.53 13404.71
Speed Index 3481.75 687891.91

Using https://sfj-b706982--base.preview.vtex.app/

Metric Mean Standard deviation
Cumulative Layout shift (CLS) 0 0
First Contentful Paint (FCP) 1146.591710387593 46688.01969331607
First Contentful Paint 3g (FCP) 2286.5917103875936 185172.6858950842
Largest Contentful Paint (LCP) 1799.2311087744408 696.6499034977962
Time to Interactive (TTI) 3416.154703867696 1247.8465910818973
Total Blocking Time (TBT) 322.825 30.631875000000015
Performance score 0.9185000000000002 0.000012750000000000017
JavaScript Execution Time 1334.0718000000002 414.42193835999586
Speed Index 1586.9125547973374 1212.1435711435802

How to test it?

Run PSI or run performance test using DevTools

base.store Deploy Preview

vtex-sites/base.store#416

References

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 23, 2022 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 246320b:

Sandbox Source
Store UI Typescript Configuration

@igorbrasileiro igorbrasileiro self-assigned this Mar 23, 2022
@igorbrasileiro igorbrasileiro marked this pull request as ready for review March 23, 2022 20:01
@igorbrasileiro igorbrasileiro requested a review from a team as a code owner March 23, 2022 20:01
@igorbrasileiro igorbrasileiro mentioned this pull request Mar 23, 2022
Merged
@igorbrasileiro igorbrasileiro requested review from a team and removed request for a team March 23, 2022 20:03
filipewl
filipewl approved these changes Mar 23, 2022
View reviewed changes
Copy link
Contributor

@filipewl filipewl left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! That article was a nice read, thanks.

Noticed this PR contains other unrelated commits from #1176, so the changes related to useStorage are only in this last commit.

@filipewl filipewl requested a review from a team March 23, 2022 20:19
eduardoformiga
eduardoformiga reviewed Mar 23, 2022
View reviewed changes
Copy link
Member

@eduardoformiga eduardoformiga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woow, looks like the results were nice! 🚀

I notice some unrelated code as @filipewl mentioned. Could you please clean the PR?

@igorbrasileiro
Copy link
Contributor Author

Woow, looks like the results were nice! 🚀

I notice some unrelated code as @filipewl mentioned. Could you please clean the PR?

Thank you for letting me know, i didn't notice.

@igorbrasileiro
Copy link
Contributor Author

@filipewl @eduardoformiga fixed.

@igorbrasileiro igorbrasileiro changed the title feat(sdk): Improve use storage feat(sdk): Improve useStorage and Optimistic revalidate effect Mar 24, 2022
tlgimenes
tlgimenes reviewed Mar 25, 2022
View reviewed changes
packages/sdk/src/storage/useStorage.ts Outdated
@@ -45,11 +45,13 @@ export const useStorage = <T>(key: string, initialValue: T | (() => T)) => {
const item = await getItem<T>(key)

if (!cancel && item !== null) {
setData(item)
setTimeout(() => {
setData(item)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can't we have racing conditions in here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ain't sure, but I will remove it.

tlgimenes
tlgimenes reviewed Mar 25, 2022
View reviewed changes
packages/sdk/src/cart/Optimistic.tsx Outdated
@@ -44,12 +44,16 @@ export const OptimisticProvider = <T extends Item = Item>({

setIsValidating(false)
if (newCart != null) {
setCart(newCart)
setTimeout(() => {
setCart(newCart)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cant we have racing conditions in here ?

@igorbrasileiro igorbrasileiro merged commit 08c616b into master Mar 25, 2022
@igorbrasileiro igorbrasileiro deleted the feat/improve-use-storage branch March 25, 2022 16:25
@igorbrasileiro igorbrasileiro added the performance Pull requests related to perfomance issues label Mar 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tlgimenes tlgimenes tlgimenes left review comments

@filipewl filipewl filipewl approved these changes

@eduardoformiga eduardoformiga eduardoformiga approved these changes

Assignees

@igorbrasileiro igorbrasileiro

Labels
performance Pull requests related to perfomance issues
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@igorbrasileiro @filipewl @tlgimenes @eduardoformiga