// src/index.js\nimport React, { Profiler } from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport './index.css';\n\nconst onRenderCallback = (\n id, // the \"id\" prop of the Profiler tree that has just committed\n phase, // either \"mount\" (if the tree just mounted) or \"update\" (if it re-rendered)\n actualDuration, // time spent rendering the committed update\n baseDuration, // estimated time to render the entire subtree without memoization\n startTime, // when React began rendering this update\n commitTime, // when React committed this update\n interactions // the Set of interactions belonging to this update\n) => {\n console.log('Profiler ID:', id);\n console.log('Phase:', phase);\n console.log('Actual Duration:', actualDuration);\n console.log('Base Duration:', baseDuration);\n console.log('Start Time:', startTime);\n console.log('Commit Time:', commitTime);\n console.log('Interactions:', interactions);\n};\n\nReactDOM.render(\n <Profiler id=\"App\" onRender={onRenderCallback}>\n <App />\n </Profiler>,\n document.getElementById('root')\n);You can also use the React Developer Tools in your web browser by installing the plugin from your browser’s extension marketplace - such as the Chrome Web Store - and opening your browser’s developer tools. Two React tabs will be added to your developer console - components and profiler. The components tab can tell you details like props of rendered React components, and the profiler tab will allow you to record a rendering timeline of your React application. Simply click the record button and trigger a render, or click the refresh button to record all rendering times from a new page refresh. This can help you get a baseline of what components are rendering quickly and which ones could be causing performance bottlenecks. You can also check things like why a component is re-rendering and use some of the tips later in the article to correct it.
\n![\"measure](\"/static/blog/093e4f0ab3a51fc89491ec69ca4051dd/measure-react-performace.gif\")
Code splitting and lazy loading
\nCode splitting allows you to break your front-end react bundle into smaller chunks that can be downloaded together in parallel or at the time they are needed, and lazy loading allows you to load less important parts of an application later, improving application performance. These combined can help increase initial load times for an application, affecting our LCP metric.
\nBy default, reactjs sends one .js file - usually bundled together by a bundler like webpack - which includes all of your react application and runs it in the client’s browser. This is fine if your app is small, but as your app grows in size, this becomes a bottleneck. Also, some pieces of your app are more important to load first. Getting the user the ProductSearch component on an e-commerce page is a much higher priority than getting them the admin page 99% of users will never see.
\nYou can set up lazy loading in React using React.lazy and React.suspense. When using lazy and suspense, react will automatically code split the components that will be lazy loaded and grab them when they’re needed. This keeps the main bundle small and makes your initial render much quicker. But be sure to not lazy load anything above the fold, as that can actually drop your LCP score.
\n// src/index.js\nimport ReactDOM from 'react-dom/client';\nimport React, { Suspense, lazy, useState } from 'react';\nimport './App.css';\n\n// this component will be removed from the bundle and fetched when needed\nconst MyComponent = lazy(() => import('./MyComponent'));\n// this component is also removed from the bundle and fetched when needed.\n// This results in 3 separate .js files\nconst MyOtherComponent = lazy(() => import('./MyOtherComponent'));\n\nconst App = () => {\n\n return (\n <div className=\"App\">\n <Suspense fallback={<div>Loading...</div>}>\n<MyComponent />\n<MyOtherComponent />\n </Suspense>\n </div>\n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);Implement React server-side rendering (SSR)
\nServer-side rendering is when the page is rendered on the server and then sent over to the client instead of sending a bundle that is rendered client-side. The client’s cpu is not usually a bottleneck for a react application, but bandwidth and latency between the client and server commonly are. By rendering server-side, we can grab all of the data we need from the database before rendering our page, which removes extra trips to the server and can speed up rendering.
\nNextjs, made by the same people who made the Vercel deployment platform, is the most popular way to implement SSR in React, and it’s very simple to use. You can simply run
\nnpx create-next-app@latest your-app-nameto generate a nextjs project. Everything will render server-side by default, with the option to render specific components client-side if necessary.
\nVirtualize lists
\nList virtualization, also known as windowing, is when you only render the part of a list that is visible to the user. This helps reduce DOM nodes on a page and make scrolling smoother, which can increase your INP score.
\nLet’s say you have an e-commerce store and someone does a search for “The”. I don’t know why they would do that, but it’s the most common word in the English language, meaning you’ll probably have to render a pretty long list of results. If we virtualize the list instead of rendering all thousand entries, we can cut down on the render time and prevent freezing while scrolling.
\nThere are many libraries, such as react-virtualized, react-window (an updated, lightweight alternative to react-virtualized made by the same team), and react-virtuoso, that can make implementing virtualized lists simple. Let’s use react-virtuoso to virtualize a list of 100 pokemon.
\nVirtualized Pokémon List
\nimport React, { useEffect, useState } from 'react';\nimport { Virtuoso } from 'react-virtuoso';\nimport ReactDOM from 'react-dom/client';\n\nconst App = () => {\n const [pokemon, setPokemon] = useState([]);\n\n useEffect(() => {\n async function fetchPokemon() {\n const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=151');\n const data = await response.json();\n setPokemon(data.results);\n };\n fetchPokemon();\n }, []);\n\n return (\n <div>\n <h1>Virtualized Pokémon List</h1>\n <Virtuoso\n style={{ height: '600px' }}\n totalCount={pokemon.length}\n itemContent={(index) => {\n const poke = pokemon[index];\n return (\n <div key={poke.name} style={{ padding: '10px', borderBottom: '1px solid #ccc' }}>\n {index + 1}. {poke.name}\n </div>\n );\n }}\n />\n </div>\n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);Look how smooth that scroll is.
\n![\"virtualized](\"/static/blog/0637216e577c0ffff46d02a938be63a4/virtualized-lists.gif\")
Properly use React’s Keys property when rendering a list
\nReact requires giving every item in a generated list of jsx a unique key. People tend to use the array index to handle this, but this can cause unnecessary re-renders. Keys are used by react to tell if it needs to re-render items in the list. If you use the array index and then an item is removed or the array is sorted, the keys in the new list will no longer match the old index keys, and all of those items will have to be re-rendered. If we use unique keys, like a userId, we can prevent React from needing to re-render any items in the list when the list’s order changes.
\nGood Idea
\nUser List
\n- \n {users.map(user => (\n
- \n
{user.name}
\n{user.email}
\n \n ))}\n
// index.js\nimport ReactDOM from 'react-dom/client';\nimport React from 'react';\n\nconst App = () => {\n const users = [\n { userId: 1, name: 'Alice', email: 'alice@example.com' },\n { userId: 2, name: 'Bob', email: 'bob@example.com' },\n { userId: 3, name: 'Charlie', email: 'charlie@example.com' },\n ];\n \n \n return (\n <div className=\"App\">\n <h1>User List</h1>\n <ul>\n {users.map(user => (\n <li key={user.userId}>\n <h3>{user.name}</h3>\n <p>{user.email}</p>\n </li>\n ))}\n </ul>\n \n </div>\n );\n };\n \n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);Bad Idea
\nUser List
\n- \n {users.map((user, index) => (\n
- \n
{user.name}
\n{user.email}
\n \n ))}\n
import ReactDOM from 'react-dom/client';\nimport React from 'react';\n\nconst App = () => {\n const users = [\n { userId: 1, name: 'Alice', email: 'alice@example.com' },\n { userId: 2, name: 'Bob', email: 'bob@example.com' },\n { userId: 3, name: 'Charlie', email: 'charlie@example.com' },\n ];\n \n \n return (\n <div className=\"App\">\n <h1>User List</h1>\n <ul>\n {users.map((user, index) => (\n <li key={index}>\n <h3>{user.name}</h3>\n <p>{user.email}</p>\n </li>\n ))}\n </ul>\n \n </div>\n );\n };\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);Memoization
\nMemoization is a specific type of caching where you cache the result of a function. This prevents you from calculating the same values over and over again.
\nIn React, every time a component’s state changes, it causes all of its children to re-render, regardless if the children have had state or prop changes. This prevents UI errors, but at the expense of performance for your app. However, with memoization, we can cache functional components, calculations they have to make, or functions they use in order to skip fully re-rendering components.
\nReact has the useMemo hook, which caches the results of a function call; React.memo, a higher order component which can render a functional component from cache if its props are unchanged (since functional components are, well, functions); and useCallback, which caches a function declaration.
\nuseMemo
\nuseMemo caches the result of a function. This is especially useful if you have a component that has large calculations it has to handle. For a practical example, if you had an e-commerce store that had a large list of items, and you needed to calculate tax cost for each item based on location in the front-end. You may need to loop through a large list of items every time a parent component has a state change, even if nothing in its own state or props hasn’t changed. But for the sake of having a bundled example showing re-rendering and the speed of rendering from cache, our example code will go through a massive loop and add to a number instead of adding tax to a list of items. By memoizing the result of our expensiveCalculation function, even when our parent components state updates, we will reuse the last result of the function as long as the count hasn’t changed.
\nTyped value: {input}
\n \n \nCount: {count}
\nExpensive Calculation Result: {memoizedValue}
\n// index.js\nimport ReactDOM from 'react-dom/client';\nimport React, { useState, useMemo } from 'react';\n\nconst App = () => {\n const [count, setCount] = useState(0);\n const [input, setInput] = useState('');\n\n // Expensive calculation function\nconst expensiveCalculation = (num) => {\n console.log('Calculating...');\n let result = 0;\n for (let i = 0; i < 1000000000; i++) {\n result += num;\n }\n return result;\n};\n\n const memoizedValue = useMemo(() => expensiveCalculation(count), [count]);\n\n return (\n <div>\n <input\n type=\"text\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n placeholder=\"Type something\"\n />\n <p>Typed value: {input}</p>\n <button onClick={() => setCount(count + 1)}>Add to count</button>\n <button onClick={() => setCount(count - 1)}>Minus from count</button>\n <p>Count: {count}</p>\n <p>Expensive Calculation Result: {memoizedValue}</p>\n </div>\n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);\nWithout useMemo
![\"without](\"/static/blog/ac605ea37bfbd6b73f77cb041a05551e/without-use-memo.gif\")
With useMemo
![\"with](\"/static/blog/b2fb52c4c48ae0752acb61bb5f431f2b/with-use-memo.gif\")
Implement Throttling and debouncing
\nThrottling is when you call a function on an event and then delay the continual execution of the function to certain time intervals as the event continues to trigger, and debouncing is when you wait a certain amount of time after an event happens to execute a function. They can both help with your INP score by making user interactions smoother. They sound very similar, but there is a slight difference between the two, and we can see it in how and why they’re implemented. We will implement both throttling and debouncing with the lodash library.
\nLet’s pretend we were a mega sized tech company that had an application to allow writing documents and saving the data in the cloud. We’ll call the application Doodle Docs. We wouldn’t want to save the document after every keystroke, because that would be overkill. But we also wouldn’t want to wait until after they stopped typing, because someone could be on a huge typing spree, lose internet connection, and then lose all their work. That would be rough! So what if instead of waiting for them to stop, we just periodically backed up what they were typing in time intervals? That’s exactly how throttling would work in this example.
\nThrottled Textbox
\n// index.js\nimport ReactDOM from 'react-dom/client';\nimport React, { useState, useCallback } from 'react';\n\n// be sure to npm install --save lodash for this to work\nimport _ from 'lodash';\n\nfunction App() {\n const [text, setText] = useState('');\n\n const throttledLog = useCallback(\n _.throttle((value) => {\n // Doodle docs would PUT request the data somewhere\n // instead of logging to console\n console.log(value);\n }, 500),\n []\n );\n\n const handleChange = (event) => {\n setText(event.target.value);\n throttledLog(event.target.value);\n };\n\n return (\n <div>\n <h1>Throttled Textbox</h1>\n <input\n type=\"text\"\n value={text}\n onChange={handleChange}\n placeholder=\"Type something...\"\n />\n </div>\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);![\"throttled](\"/static/blog/139c7ae93d8a5e169a7d7c93b76068d6/throttled-textbox.gif\")
Debouncing is useful for things like limiting search or filter results. Instead of filtering search results of pokemon on every keystroke (which is 5 characters per second for a 60 wpm typer), you can set your event listener to wait a second after the last key is pressed to display results. This makes the user experience smoother than flickering a bunch of results 5 times per second and can save you from making unneeded re-renders.
\nCount: {count}
\n \n \n )\n}\n\nconst PokemonList = ({ pokemon }) => {\n return (\n- \n {pokemon.map(pokemon => (\n
- \n
{pokemon.name}
\n\n
\n ))}\n
Debounced Pokémon Search
\n// index.js\nimport ReactDOM from 'react-dom/client';\nimport React, { useState, useTransition, useEffect } from 'react';\n// make sure to npm install --save lodash for this to work\nimport _ from 'lodash';\n\nconst Counter = () => {\n const [count, setCount] = useState(0);\n\n return (\n <>\n <p>Count: {count}</p>\n <button onClick={() => setCount(count + 1)}>Increment Count</button>\n </>\n )\n}\n\nconst PokemonList = ({ pokemon }) => {\n return (\n <ul>\n {pokemon.map(pokemon => (\n <li key={pokemon.id}>\n <h3>{pokemon.name}</h3>\n <img src={pokemon.sprites.front_default} alt={pokemon.name} />\n </li>\n ))}\n </ul>\n );\n};\n\nconst App = () => {\n const [searchTerm, setSearchTerm] = useState('');\n const [pokemonList, setPokemonList] = useState([]);\n const [filteredPokemon, setFilteredPokemon] = useState([]);\n const [isPending, startTransition] = useTransition();\n\n useEffect(() => {\n const fetchPokemon = async () => {\n const promises = [];\n for (let i = 1; i <= 1000; i++) {\n promises.push(\n fetch(`https://pokeapi.co/api/v2/pokemon/${i}`).then(response => response.json())\n );\n }\n const results = await Promise.all(promises);\n setPokemonList(results);\n setFilteredPokemon(results);\n };\n\n fetchPokemon();\n }, []);\n\n const debounceSearch = _.debounce((query) => {\n const result = pokemonList.filter(pokemon =>\n pokemon.name.toLowerCase().includes(query.toLowerCase())\n );\n setFilteredPokemon(result);\n }, 300);\n\n useEffect(() => {\n debounceSearch(searchTerm);\n // Cleanup function to cancel debounce on unmount\n return () => {\n debounceSearch.cancel();\n };\n }, [searchTerm]);\n\n\n const handleSearch = (event) => {\n const value = event.target.value;\n setSearchTerm(value);\n };\n\n return (\n <div className=\"App\">\n <h1>Debounced Pokémon Search</h1>\n <input\n type=\"text\"\n value={searchTerm}\n onChange={handleSearch}\n placeholder=\"Search Pokémon\"\n />\n <Counter />\n {isPending ? <div>Loading...</div> : <PokemonList pokemon={filteredPokemon} />}\n </div>\n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);\n![\"Debounced](\"/static/blog/fc623b308859c7540f992a2a5f5d6a58/debounced-search.gif\")
useTransition hook
\nThe useTransition hook allows you to update the state of your application without blocking the rest of the User Interface. Filtering through and updating large amounts of state can cause performance issues and lock up your application, but useTransition can fix this and help improve your INP metric.
\nYou may be thinking to yourself “Gee, this sounds pretty similar to debouncing and throttling”. And yeah, it’s in the same ballpark. But useTransition is better suited for UI transitions involved with heavy computation. Since it can handle the UI changes as a lower priority than the rest of the UI, users can still interact with the app - as where throttling or debouncing might smooth out how often we are computing, but can still freeze if the computations are too heavy.
\nLet’s say we have a large list of pokemon and we want to search through them. This will probably run fine on a 2024 macbook, but what about on a 10 year old phone? We can bet it won’t run as smoothly on older hardware like that, and sometimes that’s what our users are using to interact with our web apps. We’ll simulate using older hardware by opening the chrome dev tools, going to the performance tab, and setting the cpu throttling to x20 when we run our app. Instead of the entire web app locking up and being unresponsive while we sort and update the pokemon list, we can use useTransition, set a loading screen inside the component, and update the state of the component while still allowing full use of the rest of the UI.
\nCount: {count}
\n \n \n )\n}\n\nconst PokemonList = ({ pokemon }) => {\n return (\n- \n {pokemon.map(pokemon => (\n
- \n
{pokemon.name}
\n\n ))}\n
Pokémon Search with useTransition
\n// src/index.js\nimport ReactDOM from 'react-dom/client';\nimport React, { useState, useTransition, useEffect } from 'react';\n\nconst Counter = () => {\n const [count, setCount] = useState(0);\n\n return (\n <>\n <p>Count: {count}</p>\n <button onClick={() => setCount(count + 1)}>Increment Count</button>\n </>\n )\n}\n\nconst PokemonList = ({ pokemon }) => {\n return (\n <ul>\n {pokemon.map(pokemon => (\n <li key={pokemon.id}>\n <h3>{pokemon.name}</h3>\n <img src={pokemon.sprites.front_default} alt={pokemon.name} />\n </li>\n ))}\n </ul>\n );\n};\n\nconst App = () => {\n const [searchTerm, setSearchTerm] = useState('');\n const [pokemonList, setPokemonList] = useState([]);\n const [filteredPokemon, setFilteredPokemon] = useState([]);\n const [isPending, startTransition] = useTransition();\n\n useEffect(() => {\n const fetchPokemon = async () => {\n const promises = [];\n for (let i = 1; i <= 1000; i++) {\n promises.push(\n fetch(`https://pokeapi.co/api/v2/pokemon/${i}`).then(response => response.json())\n );\n }\n const results = await Promise.all(promises);\n setPokemonList(results);\n setFilteredPokemon(results);\n };\n\n fetchPokemon();\n }, []);\n\n const handleSearch = (event) => {\n const value = event.target.value;\n setSearchTerm(value);\n\n startTransition(() => {\n if (value === '') {\n setFilteredPokemon(pokemonList);\n } else {\n setFilteredPokemon(pokemonList.filter(pokemon => \n pokemon.name.toLowerCase().includes(value.toLowerCase())\n ));\n }\n });\n };\n\n return (\n <div className=\"App\">\n <h1>Pokémon Search with useTransition</h1>\n <input\n type=\"text\"\n value={searchTerm}\n onChange={handleSearch}\n placeholder=\"Search Pokémon\"\n />\n <Counter />\n {isPending ? <div>Loading...</div> : <PokemonList pokemon={filteredPokemon} />}\n </div>\n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);![\"search](\"/static/blog/4c3f0b0071c12a2f0c2ecf31a14c9226/pokemon-search-transition.gif\")
Inline arrow functions and CSS
\nIf you use inline arrow functions as props, React will re-create the function every time it’s re-rendered, wasting compute time. Also, using inline arrow functions and styles can undo memoization. Inline styles in react also have to be converted from a javascript object to css styling, which wastes compute time.
\nInstead of using inline arrow functions and css, define your event handlers inside the component whenever possible and import your CSS from an external style sheet.
\nGood Idea
\nimport ReactDOM from 'react-dom/client';\nimport React from 'react';\n\nconst App = () => {\n const handleClick = () => {\n console.log('clicked!');\n };\n\n return (\n <div>\n <button className=\"button\" onClick={handleClick}>Click Me</button>\n </div>\n );\n};\n\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);Bad Idea
\n// src/index.js\nimport ReactDOM from 'react-dom/client';\nimport React from 'react';\n\nconst App = () => {\n return (\n <div>\n <button style={{border: \"none\"}} onClick={ () => {console.log('clicked!')}}>Click Me</button>\n </div>\n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);React fragments
\nReact fragments allow you to render a react component without making a wrapper node. Using this throughout a large app can remove a lot of unnecessary dom nodes from the web page and make rendering the DOM faster.
\nI'm an h1 inside a React Fragment!
\n \n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(//src/ index.js\nimport ReactDOM from 'react-dom/client';\nimport React from 'react';\n\nconst App = () => {\n \n return (\n <>\n <h1>I'm an h1 inside a React Fragment!</h1>\n </>\n );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);Conclusion
\nAfter implementing all these react performance techniques, the speed, responsiveness, and user experience of your application will be noticeably improved. Now that your optimized site will be ranking on the top of google and keeping customers engaged, why not try adding rock solid authentication with Supertokens!
","frontmatter":{"date":"July 01, 2024","title":"Tips for Optimizing Your React App’s Performance","cover":"optimize-react-app-performance.png","author":"Connor Peshek","description":"Poor app performance can reduce user engagement and will negatively affect SEO, here are tips to optimize your react app"},"fields":{"slug":"/5-tips-for-optimizing-your-react-apps-performance/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"e48de67d-c612-5adb-8f26-583cea6f6cfc","fields__slug":"/5-tips-for-optimizing-your-react-apps-performance/","__params":{"fields__slug":"5-tips-for-optimizing-your-react-apps-performance"}}}, "staticQueryHashes": []}