From 1e3dbd9aac25aaedf5ae97ed8b779a1da0266d6b Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 24 Jan 2020 12:53:11 +0100 Subject: [PATCH 1/4] fix(hooks): minor fixes to useAccessibility & useStyles --- packages/react-bindings/src/hooks/useAccessibility.ts | 10 ++-------- packages/react-bindings/src/hooks/useStateManager.ts | 7 ++----- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/react-bindings/src/hooks/useAccessibility.ts b/packages/react-bindings/src/hooks/useAccessibility.ts index 3115d95dde..de71c9b833 100644 --- a/packages/react-bindings/src/hooks/useAccessibility.ts +++ b/packages/react-bindings/src/hooks/useAccessibility.ts @@ -62,14 +62,8 @@ const useAccessibility = ( actionHandlers, ) - const latestDefinition = React.useRef(definition) - latestDefinition.current = definition - - return React.useCallback( - >(slotName: string, slotProps: SlotProps) => - mergeProps(slotName, slotProps, latestDefinition.current), - [], - ) + return >(slotName: string, slotProps: SlotProps) => + mergeProps(slotName, slotProps, definition) } export default useAccessibility diff --git a/packages/react-bindings/src/hooks/useStateManager.ts b/packages/react-bindings/src/hooks/useStateManager.ts index 95e642d7a5..c303f67a2a 100644 --- a/packages/react-bindings/src/hooks/useStateManager.ts +++ b/packages/react-bindings/src/hooks/useStateManager.ts @@ -39,11 +39,8 @@ const useStateManager = < const latestManager = React.useRef | null>(null) // Heads up! forceUpdate() is used only for triggering rerenders stateManager is SSOT() - const [, forceUpdate] = React.useState() - const syncState = React.useCallback( - (_prevState: State, nextState: State) => forceUpdate(nextState), - [], - ) + const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void] + const syncState = () => forceUpdate() // If manager exists, the current state will be used const initialState = latestManager.current From 5bdba3473de4190cae970231737219b2ddff644a Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 24 Jan 2020 13:01:56 +0100 Subject: [PATCH 2/4] add changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60c8bbf30e..2fbf8ca1d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,11 +22,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239)) - `mode` property from `focusZone` configuration in accessibility behaviors is no longer supported - the focus zone will always be in embed mode @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265)) - `FocusZoneMode` and `FOCUSZONE_WRAP_ATTRIBUTE` are no longer exported @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265)) +- Returned function from `useAccessibility` no longer keeps the same reference @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268)) ### Fixes - Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227)) - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235)) - Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248)) +- Fix `forceUpdate` to get synced updates in React's Concurrent mode @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268)) ### Features - Allow `useRef` hook used for storing debugging data to be defined in any order with other hooks in functional components @layershifter, @mnajdova ([#2236](https://github.com/microsoft/fluent-ui-react/pull/2236)) From a5390c44e552210e79cc0ef8620081aadae35fb8 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 27 Jan 2020 10:56:50 +0100 Subject: [PATCH 3/4] fix naming --- packages/react-bindings/src/hooks/useStateManager.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-bindings/src/hooks/useStateManager.ts b/packages/react-bindings/src/hooks/useStateManager.ts index c303f67a2a..0d5c5e6f81 100644 --- a/packages/react-bindings/src/hooks/useStateManager.ts +++ b/packages/react-bindings/src/hooks/useStateManager.ts @@ -38,9 +38,8 @@ const useStateManager = < } = options const latestManager = React.useRef | null>(null) - // Heads up! forceUpdate() is used only for triggering rerenders stateManager is SSOT() + // Heads up! forceUpdate() is used only for triggering rerenders, stateManager is SSOT const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void] - const syncState = () => forceUpdate() // If manager exists, the current state will be used const initialState = latestManager.current @@ -51,7 +50,7 @@ const useStateManager = < // Factory has already configured actions actions: {} as EnhancedActions, state: { ...initialState, ...getDefinedProps(mapPropsToState()) }, - sideEffects: [...sideEffects, syncState], + sideEffects: [...sideEffects, forceUpdate], }) // We need to pass exactly `manager.state` to provide the same state object during the same render From 59e78adcb59bdc6b7c32d372d04acbbf025d1ac3 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 27 Jan 2020 12:01:32 +0100 Subject: [PATCH 4/4] fix naming --- packages/react-bindings/src/hooks/useStateManager.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-bindings/src/hooks/useStateManager.ts b/packages/react-bindings/src/hooks/useStateManager.ts index 0d5c5e6f81..9ab42d4ea4 100644 --- a/packages/react-bindings/src/hooks/useStateManager.ts +++ b/packages/react-bindings/src/hooks/useStateManager.ts @@ -50,7 +50,12 @@ const useStateManager = < // Factory has already configured actions actions: {} as EnhancedActions, state: { ...initialState, ...getDefinedProps(mapPropsToState()) }, - sideEffects: [...sideEffects, forceUpdate], + sideEffects: [ + ...sideEffects, + // `sideEffect` is called with two arguments, but hooks don't support the second callback + // argument + () => forceUpdate(), + ], }) // We need to pass exactly `manager.state` to provide the same state object during the same render