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

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

71
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 { Rectangle, TileFactory, TileKeyObject } from './types';
@ -27,41 +27,42 @@ export interface TiledLayerProperties {
* TODO: test tiles'X and Y boundaries.
*
*/
export const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties
) => {
console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
const tiles = useRef<any>({});
const previousKeyObject = useRef<TileKeyObject>(props.keyObject);
if (!isEqual(props.keyObject, previousKeyObject.current)) {
previousKeyObject.current = props.keyObject;
tiles.current = {};
}
range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).map(
(row) => {
range(props.viewPort.topLeft.x, props.viewPort.bottomRight.x + 1).map(
(col) => {
const keyObject = {
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
x: props.keyObject.x + col,
y: props.keyObject.y + row,
};
const key = tileUri(keyObject);
if (!Object.hasOwn(tiles.current, key)) {
tiles.current[key] = (
<g key={key} transform={`translate(${col}, ${row})`}>
{props.tileFactory(keyObject)}
</g>
);
}
}
);
export const TiledLayer: react.FC<TiledLayerProperties> = memo(
(props: TiledLayerProperties) => {
console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
const tiles = useRef<any>({});
const previousKeyObject = useRef<TileKeyObject>(props.keyObject);
if (!isEqual(props.keyObject, previousKeyObject.current)) {
previousKeyObject.current = props.keyObject;
tiles.current = {};
}
);
return <>{Object.values(tiles.current)}</>;
};
range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).map(
(row) => {
range(props.viewPort.topLeft.x, props.viewPort.bottomRight.x + 1).map(
(col) => {
const keyObject = {
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
x: props.keyObject.x + col,
y: props.keyObject.y + row,
};
const key = tileUri(keyObject);
if (!Object.hasOwn(tiles.current, key)) {
tiles.current[key] = (
<g key={key} transform={`translate(${col}, ${row})`}>
{props.tileFactory(keyObject)}
</g>
);
}
}
);
}
);
return <>{Object.values(tiles.current)}</>;
},
isEqual
);
export default TiledLayer;