From e184c9ce9cd6236f841e986ac63509148eaa6a36 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 21 Nov 2022 12:36:42 -0500 Subject: [PATCH] abstract `radioState` and `setRadioState` for cleaner deps --- .../toggle-group-control/as-radio-group.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx index 8cf75e2266ee6a..483efca45c4cc7 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx @@ -64,14 +64,14 @@ function UnforwardedToggleGroupControlAsRadioGroup( }, [ radio.state, previousValue, onChange ] ); // Sync incoming value with radio.state. + const { state: radioState, setState: setRadioState } = radio; useUpdateEffect( () => { - if ( value !== radio.state ) { - radio.setState( value ); + if ( value !== radioState ) { + setRadioState( value ); } - // disable reason: Adding `radio` to the dependency array causes an extra render. - // Memoizing it doesn't look easily doable, so we're disabling the rule for now. - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ value ] ); + // setRadioState needs to be listed even if in theory it's supposed to be a + // stable reference — that's an ESLint limitation. + }, [ value, radioState, setRadioState ] ); return (