Fonction pour repérer les rerenders de Conten

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
   plugins: [
     "react",
     "react-hooks",
+		    'eslint-plugin-react-compiler',
   ],
   rules: {
     "quotes": [
@@ -41,6 +42,7 @@ module.exports = {
     "react-hooks/exhaustive-deps": "warn",
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
+		    'react-compiler/react-compiler': "error",
   },
   settings: {
     "react": {

.eslintrc.yaml

@@ -13,11 +13,13 @@ rules:
   react/display-name: 0
   react-hooks/rules-of-hooks: error
   react-hooks/exhaustive-deps: warn
+  react-compiler/react-compiler: error
 parser: babel-eslint
 
 plugins:
   - react
   - react-hooks
+  - eslint-plugin-react-compiler
 env:
   browser: true
   commonjs: true

app/Container.tsx

@@ -23,7 +23,7 @@
  * bbox
  **/
 
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 
 import { getCategory } from '@/components/categories'
 import ModalSwitch from './ModalSwitch'
@@ -34,10 +34,10 @@ import useSetItineraryModeFromUrl from './itinerary/useSetItineraryModeFromUrl'
 import { mapLibreBboxToOverpass } from '@/components/mapUtils'
 import useSetSearchParams from '@/components/useSetSearchParams'
 import { useDebounce } from '@/components/utils'
-import dynamic from 'next/dynamic'
 import { useLocalStorage } from 'usehooks-ts'
 import FocusedImage from './FocusedImage'
 import { initialSnap } from './ModalSheet'
+import PanoramaxLoader from './PanoramaxLoader'
 import SafeMap from './SafeMap'
 import { defaultZoom } from './effects/useAddMap'
 import useFetchTransportMap, {
@@ -50,15 +50,8 @@ import useFetchItinerary from './itinerary/useFetchItinerary'
 import Meteo from './meteo/Meteo'
 import { getStyle } from './styles/styles'
 import useTransportStopData from './transport/useTransportStopData'
-import PanoramaxLoader from './PanoramaxLoader'
 import useWikidata from './useWikidata'
 
-// Map is forced as dynamic since it can't be rendered by nextjs server-side.
-// There is almost no interest to do that anyway, except image screenshots
-const Map = dynamic(() => import('./Map'), {
-	ssr: false,
-})
-
 export default function Container({
 	searchParams,
 	state: givenState,
@@ -68,6 +61,7 @@ export default function Container({
 	const [focusedImage, focusImage] = useState(null)
 	const [isMapLoaded, setMapLoaded] = useState(false)
 	const [bbox, setBbox] = useState(null)
+	const debouncedBbox = useDebounce(bbox, 300)
 	const [zoom, setZoom] = useState(defaultZoom)
 	const [bboxImages, setBboxImages] = useState([])
 	const [latLngClicked, setLatLngClicked] = useState(null)
@@ -209,9 +203,9 @@ export default function Container({
 	/* The bbox could be computed from the URL hash, for this to run on the
 	 * server but I'm not sure we want it, and I'm not sure Next can get the hash
 	 * server-side, it's a client-side html element */
-	const simpleArrayBbox = useDebounce(
-		bbox && mapLibreBboxToOverpass(bbox),
-		200 // TODO Ideally, just above https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/FlyToOptions/
+	const simpleArrayBbox = useMemo(
+		() => debouncedBbox && mapLibreBboxToOverpass(debouncedBbox), // TODO Ideally, just above https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/FlyToOptions/
+		[debouncedBbox]
 	)
 
 	const [quickSearchFeatures] = useOverpassRequest(simpleArrayBbox, category)
@@ -255,7 +249,7 @@ export default function Container({
 							agencyAreas,
 							geolocation,
 							bboxImages,
-							bbox,
+							bbox: debouncedBbox,
 							focusImage,
 							vers,
 							osmFeature,

app/Content.tsx

@@ -28,48 +28,53 @@ import TransportMap from './transport/TransportMap'
 import useOgImageFetcher from './useOgImageFetcher'
 import Link from 'next/link'
 import { Loader } from '@/components/loader'
+import { useWhatChanged } from '@/components/utils/useWhatChanged'
 
 const getMinimumQuickSearchZoom = (mobile) => (mobile ? 10.5 : 12) // On a small screen, 70 %  of the tiles are not visible, hence this rule
 
-export default function Content({
-	latLngClicked,
-	setLatLngClicked,
-	clickedGare,
-	bikeRoute,
-	setBikeRouteProfile,
-	bikeRouteProfile,
-	clickGare,
-	zoneImages,
-	bboxImages,
-	bbox,
-	panoramaxImages,
-	resetZoneImages,
-	state,
-	setState,
-	zoom,
-	setZoom,
-	sideSheet, // This gives us the indication that we're on the desktop version, where the Content is on the left, always visible, as opposed to the mobile version where a pull-up modal is used
-	searchParams,
-	snap,
-	setSnap = (snap) => null,
-	openSheet = () => null,
-	setStyleChooser,
-	style,
-	styleKey,
-	styleChooser,
-	itinerary,
-	transportStopData,
-	geocodedClickedPoint,
-	resetClickedPoint,
-	transportsData,
-	geolocation,
-	focusImage,
-	vers,
-	osmFeature,
-	quickSearchFeaturesLoaded,
-	setDisableDrag,
-	wikidata,
-}) {
+export default function Content(props) {
+	const {
+		latLngClicked,
+		setLatLngClicked,
+		clickedGare,
+		bikeRoute,
+		setBikeRouteProfile,
+		bikeRouteProfile,
+		clickGare,
+		zoneImages,
+		bboxImages,
+		bbox,
+		panoramaxImages,
+		resetZoneImages,
+		state,
+		setState,
+		zoom,
+		setZoom,
+		sideSheet, // This gives us the indication that we're on the desktop version, where the Content is on the left, always visible, as opposed to the mobile version where a pull-up modal is used
+		searchParams,
+		snap,
+		setSnap = (snap) => null,
+		openSheet = () => null,
+		setStyleChooser,
+		style,
+		styleKey,
+		styleChooser,
+		itinerary,
+		transportStopData,
+		geocodedClickedPoint,
+		resetClickedPoint,
+		transportsData,
+		geolocation,
+		focusImage,
+		vers,
+		osmFeature,
+		quickSearchFeaturesLoaded,
+		setDisableDrag,
+		wikidata,
+	} = props
+
+	useWhatChanged(props)
+
 	const tags = osmFeature?.tags
 	const url = tags && getUrl(tags)
 

app/ModalSwitch.tsx

@@ -1,9 +1,8 @@
 import { useMediaQuery } from 'usehooks-ts'
 
+import { useEffect, useState } from 'react'
 import ModalSheet from './ModalSheet'
 import SideSheet from './SideSheet'
-import { useEffect, useState } from 'react'
-import Content from './Content'
 
 export default function ModalSwitch(props) {
 	const [mode, setMode] = useState('no-js')

app/SafeMap.tsx

@@ -1,6 +1,7 @@
 import isWebglSupported from '@/components/isWebglSupported'
 import Map from './Map'
 import css from '@/components/css/convertToJs'
+
 export default function SafeMap(props) {
 	const supported = isWebglSupported()
 	if (supported === null) return

app/blog/[slug]/page.tsx

@@ -10,13 +10,13 @@ import OtherArticles from '../OtherArticles'
 import { mdxComponents } from '../mdxComponents'
 import { dateCool, getLastEdit } from '../utils'
 
-export const generateMetadata = async props => {
-    const params = await props.params;
-    const post = allArticles.find(
+export const generateMetadata = async (props) => {
+	const params = await props.params
+	const post = allArticles.find(
 		(post) => post._raw.flattenedPath === params.slug
 	)
-    const lastEdit = await getLastEdit(params.slug)
-    return {
+	const lastEdit = await getLastEdit(params.slug)
+	return {
 		title: post.titre.raw,
 		description: post.description,
 		openGraph: {
@@ -30,17 +30,18 @@ export const generateMetadata = async props => {
 }
 
 export default async function Post(props: Props) {
-    const params = await props.params;
-    const post = allArticles.find(
+	const params = await props.params
+	console.log('SLUG', params.slug)
+	const post = allArticles.find(
 		(post) => post._raw.flattenedPath === params.slug
 	)
 
-    const MDXContent = useMDXComponent(post.body.code)
-    const lastEdit = await getLastEdit(params.slug)
+	const MDXContent = useMDXComponent(post.body.code)
+	const lastEdit = await getLastEdit(params.slug)
 
-    const sameEditDate =
+	const sameEditDate =
 		!lastEdit || post.date.slice(0, 10) === lastEdit.slice(0, 10)
-    return (
+	return (
 		<div>
 			<Article>
 				{!post.tags?.includes('page') && (

components/utils/useWhatChanged.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react'
+
+export function useWhatChanged(props: { [prop: string]: unknown }) {
+	// cache the last set of props
+	const prev = useRef(props)
+
+	useEffect(() => {
+		// check each prop to see if it has changed
+		const changed = Object.entries(props).reduce(
+			(a, [key, prop]: [string, unknown]) => {
+				if (prev.current[key] === prop) return a
+				return {
+					...a,
+					[key]: {
+						prev: prev.current[key],
+						next: prop,
+					},
+				}
+			},
+			{} as { [k: string]: any }
+		)
+
+		if (Object.keys(changed).length > 0) {
+			console.log('Props That Changed', changed)
+		}
+
+		prev.current = props
+	}, [props])
+}

package.json

@@ -81,7 +81,7 @@
 		"jsdom": "^22.1.0",
 		"maplibre-gl": "^5.0.0-pre.1",
 		"next": "^15.0.0",
-		"next-contentlayer2": "^0.4.6",
+		"next-contentlayer2": "0.5.1",
 		"next-mdx-remote": "^5.0.0",
 		"opening_hours": "^3.8.0",
 		"openmoji": "^15.0.0",