From 6048a7d0f8552e123a2026fe74000f6198861d25 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 9 Jun 2022 12:46:33 -0400 Subject: [PATCH 1/6] NavigationItem: add missing deps to `useNavigationTreeItem` `useEffect` --- .../src/navigation/item/use-navigation-tree-item.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js index 109c7a38bf924..fc58c59a87d1e 100644 --- a/packages/components/src/navigation/item/use-navigation-tree-item.js +++ b/packages/components/src/navigation/item/use-navigation-tree-item.js @@ -34,5 +34,14 @@ export const useNavigationTreeItem = ( itemId, props ) => { return () => { removeItem( itemId ); }; - }, [ activeMenu, search ] ); + }, [ + activeMenu, + search, + addItem, + itemId, + props, + group, + menu, + removeItem, + ] ); }; From 7dc9f3f8f4395b4781a1ee0512f460a9af46cd92 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 23 Jun 2022 11:19:39 -0400 Subject: [PATCH 2/6] NavigationItem: memoize `addItem` with `useCallback` --- .../src/navigation/item/use-navigation-tree-item.js | 11 +---------- .../src/navigation/use-navigation-tree-nodes.js | 4 ++-- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js index fc58c59a87d1e..51435472ae525 100644 --- a/packages/components/src/navigation/item/use-navigation-tree-item.js +++ b/packages/components/src/navigation/item/use-navigation-tree-item.js @@ -34,14 +34,5 @@ export const useNavigationTreeItem = ( itemId, props ) => { return () => { removeItem( itemId ); }; - }, [ - activeMenu, - search, - addItem, - itemId, - props, - group, - menu, - removeItem, - ] ); + }, [ activeMenu, search, addItem ] ); }; diff --git a/packages/components/src/navigation/use-navigation-tree-nodes.js b/packages/components/src/navigation/use-navigation-tree-nodes.js index b69c49b970f26..2ad4e85f506fc 100644 --- a/packages/components/src/navigation/use-navigation-tree-nodes.js +++ b/packages/components/src/navigation/use-navigation-tree-nodes.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useState, useCallback } from '@wordpress/element'; export const useNavigationTreeNodes = () => { const [ nodes, setNodes ] = useState( {} ); @@ -14,7 +14,7 @@ export const useNavigationTreeNodes = () => { ...original, [ key ]: newNode, } ) ); - }; + }, [] ); const removeNode = ( key ) => { return setNodes( ( original ) => { From 531f7ec08f7ed404b2f0ac8e023521ffd1061bc5 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 23 Jun 2022 11:22:33 -0400 Subject: [PATCH 3/6] NavigationItem: memoize `removeItem` with `useCallback` --- .../src/navigation/item/use-navigation-tree-item.js | 2 +- .../components/src/navigation/use-navigation-tree-nodes.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js index 51435472ae525..0a10d43e41214 100644 --- a/packages/components/src/navigation/item/use-navigation-tree-item.js +++ b/packages/components/src/navigation/item/use-navigation-tree-item.js @@ -34,5 +34,5 @@ export const useNavigationTreeItem = ( itemId, props ) => { return () => { removeItem( itemId ); }; - }, [ activeMenu, search, addItem ] ); + }, [ activeMenu, search, addItem, removeItem ] ); }; diff --git a/packages/components/src/navigation/use-navigation-tree-nodes.js b/packages/components/src/navigation/use-navigation-tree-nodes.js index 2ad4e85f506fc..d6385a7b67972 100644 --- a/packages/components/src/navigation/use-navigation-tree-nodes.js +++ b/packages/components/src/navigation/use-navigation-tree-nodes.js @@ -16,12 +16,12 @@ export const useNavigationTreeNodes = () => { } ) ); }, [] ); - const removeNode = ( key ) => { + const removeNode = useCallback( ( key ) => { return setNodes( ( original ) => { const { [ key ]: removedNode, ...remainingNodes } = original; return remainingNodes; } ); - }; + }, [] ); return { nodes, getNode, addNode, removeNode }; }; From 7b4e697b5a89e4b14efc7a20f0b849cd8c2d9c03 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 23 Jun 2022 11:34:38 -0400 Subject: [PATCH 4/6] NavigationItem: add remaining useEffect deps (non-memoized) --- .../src/navigation/item/use-navigation-tree-item.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js index 0a10d43e41214..671561ea3caf7 100644 --- a/packages/components/src/navigation/item/use-navigation-tree-item.js +++ b/packages/components/src/navigation/item/use-navigation-tree-item.js @@ -34,5 +34,14 @@ export const useNavigationTreeItem = ( itemId, props ) => { return () => { removeItem( itemId ); }; - }, [ activeMenu, search, addItem, removeItem ] ); + }, [ + activeMenu, + search, + addItem, + removeItem, + props, + group, + itemId, + menu, + ] ); }; From b2a0fc7945d77aa89ed36895239735b0ac63bcc3 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 23 Jun 2022 11:52:17 -0400 Subject: [PATCH 5/6] NavigationItem: update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6ea0eff17d580..dbfa0be3f6588 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -33,6 +33,7 @@ - `CustomGradientPicker`: Refactor away from Lodash ([#41901](https://github.com/WordPress/gutenberg/pull/41901/)). - `SegmentedControl`: Refactor away from `_.values()` ([#41905](https://github.com/WordPress/gutenberg/pull/41905/)). - `DimensionControl`: Refactor docs away from `_.partialRight()` ([#41909](https://github.com/WordPress/gutenberg/pull/41909/)). +- `NavigationItem` updated to ignore `react/exhuastive-deps` eslint rule ([#41639](https://github.com/WordPress/gutenberg/pull/41639)). ## 19.13.0 (2022-06-15) From 798f3fe9044ed9ff005acac7075d4c58d1825365 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 27 Jun 2022 13:59:40 -0400 Subject: [PATCH 6/6] revert previous changes and ignore exhuastive deps for now --- .../src/navigation/item/use-navigation-tree-item.js | 13 +++---------- .../src/navigation/use-navigation-tree-nodes.js | 8 ++++---- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js index 671561ea3caf7..28db2e526e1b4 100644 --- a/packages/components/src/navigation/item/use-navigation-tree-item.js +++ b/packages/components/src/navigation/item/use-navigation-tree-item.js @@ -34,14 +34,7 @@ export const useNavigationTreeItem = ( itemId, props ) => { return () => { removeItem( itemId ); }; - }, [ - activeMenu, - search, - addItem, - removeItem, - props, - group, - itemId, - menu, - ] ); + // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639 + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ activeMenu, search ] ); }; diff --git a/packages/components/src/navigation/use-navigation-tree-nodes.js b/packages/components/src/navigation/use-navigation-tree-nodes.js index d6385a7b67972..b69c49b970f26 100644 --- a/packages/components/src/navigation/use-navigation-tree-nodes.js +++ b/packages/components/src/navigation/use-navigation-tree-nodes.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState, useCallback } from '@wordpress/element'; +import { useState } from '@wordpress/element'; export const useNavigationTreeNodes = () => { const [ nodes, setNodes ] = useState( {} ); @@ -14,14 +14,14 @@ export const useNavigationTreeNodes = () => { ...original, [ key ]: newNode, } ) ); - }, [] ); + }; - const removeNode = useCallback( ( key ) => { + const removeNode = ( key ) => { return setNodes( ( original ) => { const { [ key ]: removedNode, ...remainingNodes } = original; return remainingNodes; } ); - }, [] ); + }; return { nodes, getNode, addNode, removeNode }; };