Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Avoid uncessessary rerendering (see https://medium.com/swlh/making-stupid-react-smart-in-re-rendering-5f04b5bab327 ).

This commit is contained in:
Eric van der Vlist 2022-10-18 16:52:24 +02:00
parent ab5c8ff6bb
commit a7f78e0fa9
2 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/map/Map.tsx
View File

@ -1,4 +1,4 @@
import react, { useState } from 'react'; import react, { useCallback, useState } from 'react';
import Handlers from './Handlers'; import Handlers from './Handlers';
import Tile from './Tile'; import Tile from './Tile';
import TiledLayer from './TiledLayer'; import TiledLayer from './TiledLayer';
@ -16,10 +16,13 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
shift: { x: 0, y: 0 }, shift: { x: 0, y: 0 },
}); });
const simpleTileFactory: TileFactory = (keyObject) => ( const simpleTileFactory: TileFactory = useCallback(
(keyObject) => (
<Tile <Tile
href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`} href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
/> />
),
[]
); );
const transformMap = ( const transformMap = (

11
src/components/map/TiledLayer.tsx
View File

@ -1,4 +1,4 @@
import react, { useRef } from 'react'; import react, { memo, useRef } from 'react';
import { range, isEqual } from 'lodash'; import { range, isEqual } from 'lodash';
import { Rectangle, TileFactory, TileKeyObject } from './types'; import { Rectangle, TileFactory, TileKeyObject } from './types';
@ -27,9 +27,8 @@ export interface TiledLayerProperties {
* TODO: test tiles'X and Y boundaries. * TODO: test tiles'X and Y boundaries.
* *
*/ */
export const TiledLayer: react.FC<TiledLayerProperties> = ( export const TiledLayer: react.FC<TiledLayerProperties> = memo(
props: TiledLayerProperties (props: TiledLayerProperties) => {
) => {
console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`); console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
const tiles = useRef<any>({}); const tiles = useRef<any>({});
const previousKeyObject = useRef<TileKeyObject>(props.keyObject); const previousKeyObject = useRef<TileKeyObject>(props.keyObject);
@ -62,6 +61,8 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
); );
return <>{Object.values(tiles.current)}</>; return <>{Object.values(tiles.current)}</>;
}; },
isEqual
);
export default TiledLayer; export default TiledLayer;