mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Memoize ShlinkWebComponentContainer to fix flickering charts on re-renders

Browse source
This commit is contained in:
Alejandro Celaya 2023-12-25 14:08:49 +01:00
parent 4973a143a6
commit 6226930bd9
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/common/ShlinkWebComponentContainer.tsx
View file

@ -1,5 +1,6 @@
import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component'; import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
import type { FC } from 'react'; import type { FC } from 'react';
import { memo } from 'react';
import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder'; import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
import type { FCWithDeps } from '../container/utils'; import type { FCWithDeps } from '../container/utils';
import { componentFactory, useDependencies } from '../container/utils'; import { componentFactory, useDependencies } from '../container/utils';
@ -22,7 +23,11 @@ type ShlinkWebComponentContainerDeps = {
const ShlinkWebComponentContainer: FCWithDeps< const ShlinkWebComponentContainer: FCWithDeps<
ShlinkWebComponentContainerProps, ShlinkWebComponentContainerProps,
ShlinkWebComponentContainerDeps ShlinkWebComponentContainerDeps
> = withSelectedServer(({ selectedServer, settings }) => { // FIXME Using `memo` here to solve a flickering effect in charts.
// memo is probably not the right solution. The root cause is the withSelectedServer HOC, but I couldn't fix the
// extra rendering there.
// This should be revisited at some point.
> = withSelectedServer(memo(({ selectedServer, settings }) => {
const { const {
buildShlinkApiClient, buildShlinkApiClient,
TagColorsStorage: tagColorsStorage, TagColorsStorage: tagColorsStorage,
@ -47,7 +52,7 @@ ShlinkWebComponentContainerDeps
)} )}
/> />
); );
}); }));
export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [ export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [
'buildShlinkApiClient', 'buildShlinkApiClient',