diff --git a/ssr-testing/app/checkbox/exemple_probleme.tsx b/ssr-testing/app/checkbox/exemple_probleme.tsx index 6ef5992db..25c6472e8 100644 --- a/ssr-testing/app/checkbox/exemple_probleme.tsx +++ b/ssr-testing/app/checkbox/exemple_probleme.tsx @@ -1,3 +1,5 @@ +// Ce fichier est une implémentation du problème de base +// Il génère une erreur "infinite depth" // Pour tester le problème, il faut renommer le fichier en page.tsx 'use client'; @@ -6,8 +8,10 @@ import * as React from 'react'; import * as Checkbox from '@radix-ui/react-checkbox'; export default function Page() { + // État (booléen) associé à la checkbox et au div const [isChecked, setIsChecked] = React.useState(false); + // Fonction pour alterner l’état de la checkbox const handleCheckedChange = (newChecked: boolean) => { console.log('Checkbox checked:', newChecked); // Affiche l'état dans la console setIsChecked(newChecked); @@ -15,8 +19,8 @@ export default function Page() { return (
-
setIsChecked((prev) => !prev)}> - +
setIsChecked((prev) => !prev)}> {/* Alterne l’état*/} + {/* Associe l'état de la checkbox et la fonction d'inversion de l'état*/} [ ] test