From 93c57d2b5d822d74f7366639cc38b55c003ed587 Mon Sep 17 00:00:00 2001 From: Michael Fix Date: Wed, 13 Feb 2019 10:55:07 -0800 Subject: [PATCH] debounce updating query string and localStorage (#664) * debounce updating query string and localStorage * memoize meta components * fix tests --- components/Meta.js | 24 +++++++++--------------- cypress/integration/localStorage-spec.js | 3 ++- pages/index.js | 19 ++++++++++++------- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/components/Meta.js b/components/Meta.js index 73aeee8..a86ef55 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -37,7 +37,7 @@ export const CodeMirrorLink = () => ( const title = 'Carbon' const description = 'Carbon is the easiest way to create and share beautiful images of your source code.' -export const MetaTags = () => ( +export const MetaTags = React.memo(() => ( @@ -54,9 +54,9 @@ export const MetaTags = () => ( -) +)) -export const MetaLinks = () => { +export const MetaLinks = React.memo(() => { return ( @@ -71,21 +71,15 @@ export const MetaLinks = () => { })} ) -} +}) -export const Styles = () => ( - - - - - -) - -export default function Meta() { +export default React.memo(function Meta() { return ( - + + + ) -} +}) diff --git a/cypress/integration/localStorage-spec.js b/cypress/integration/localStorage-spec.js index 029c622..abf5259 100644 --- a/cypress/integration/localStorage-spec.js +++ b/cypress/integration/localStorage-spec.js @@ -30,6 +30,8 @@ describe('localStorage', () => { .click() .contains('Blackboard') + cy.wait(1000) // URL updates are debounced + cy.window() .its('localStorage.CARBON_STATE') .then(JSON.parse) @@ -41,7 +43,6 @@ describe('localStorage', () => { themeDropdown() .click() .contains('Blackboard') - cy.wait(1000) // URL updates are debounced cy.url().should('contain', 't=blackboard') }) }) diff --git a/pages/index.js b/pages/index.js index bb84ac8..440f730 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,7 @@ // Theirs import React from 'react' import { withRouter } from 'next/router' +import debounce from 'lodash.debounce' // Ours import Editor from '../components/Editor' @@ -13,13 +14,17 @@ import { saveSettings, clearSettings, omit } from '../lib/util' class Index extends React.Component { shouldComponentUpdate = () => false - onEditorUpdate = state => { - updateQueryString(this.props.router, state) - saveSettings( - localStorage, - omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename']) - ) - } + onEditorUpdate = debounce( + state => { + updateQueryString(this.props.router, state) + saveSettings( + localStorage, + omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename']) + ) + }, + 750, + { trailing: true, leading: true } + ) render() { return (