fix(common): memoize initial select options value

data-driven-forms · Mar 21, 2024 · a3f8df1 · a3f8df1
1 parent 2a9ace4
commit a3f8df1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/packages/common/src/select/select.js b/packages/common/src/select/select.js
@@ -12,7 +12,7 @@ const Select = ({
  simpleValue = true,
  isMulti,
  pluckSingleValue = true,
- options: propsOptions = [],
+ options: propsOptions,
  loadOptions,
  loadingMessage,
  placeholder = 'Choose...',

diff --git a/packages/common/src/use-select/use-select.js b/packages/common/src/use-select/use-select.js
@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from 'react';
+import { useEffect, useReducer, useState } from 'react';
 
 import isEqual from 'lodash/isEqual';
 
@@ -58,7 +58,7 @@ const handleSelectChange = (option, simpleValue, isMulti, onChange, allOptions,
 const useSelect = ({
  loadOptions,
  optionsTransformer,
- options: propsOptions,
+ options: initialOptions = [],
  noValueUpdates,
  onChange,
  value,
@@ -69,9 +69,16 @@ const useSelect = ({
  simpleValue,
  compareValues,
 }) => {
- const [state, originalDispatch] = useReducer(reducer, { optionsTransformer, propsOptions }, init);
+ const [propsOptions, setPropsCache] = useState(initialOptions);
+ const [state, originalDispatch] = useReducer(reducer, { optionsTransformer, propsOptions: initialOptions }, init);
  const dispatch = (action) => originalDispatch({ ...action, optionsTransformer });
 
+ useEffect(() => {
+ if (!isEqual(initialOptions, propsOptions)) {
+ setPropsCache(initialOptions);
+ }
+ }, [initialOptions]);
+
  const isMounted = useIsMounted();
 
  const updateOptions = () => {