Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Common select fixes #1449

Merged
merged 3 commits into from
Mar 21, 2024
Merged

Common select fixes #1449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03f6346
fix(common): useSelect rendering loop
Hyperkid123 Mar 21, 2024
dc745bf
fix(common): memoize initial select options value
Hyperkid123 Mar 21, 2024
23a38f5
fix(common): lift compare values from select promises
Hyperkid123 Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/common/src/select/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Select = ({
simpleValue = true,
isMulti,
pluckSingleValue = true,
options: propsOptions = [],
options: propsOptions,
loadOptions,
loadingMessage,
placeholder = 'Choose...',
Expand Down
11 changes: 4 additions & 7 deletions packages/common/src/use-select/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
...(optionsTransformer && { originalOptions: propsOptions }),
});

const reducer = (state, { type, payload, options = [], optionsTransformer }) => {
const reducer = (state, { type, payload, options = [], optionsTransformer, compareValues }) => {
switch (type) {
case 'updateOptions':
return {
Expand Down Expand Up @@ -42,14 +42,11 @@
options: optionsTransformer
? optionsTransformer([
...state.options,
...options.filter(({ value }) => !state.options.find((option) => payload.compareValues(option.value, value))),
...options.filter(({ value }) => !state.options.find((option) => compareValues(option.value, value))),

Check warning on line 45 in packages/common/src/use-select/reducer.js

View check run for this annotation

Codecov / codecov/patch

packages/common/src/use-select/reducer.js#L45 

Added line #L45 was not covered by tests
])
: [...state.options, ...options.filter(({ value }) => !state.options.find((option) => payload.compareValues(option.value, value)))],
: [...state.options, ...options.filter(({ value }) => !state.options.find((option) => compareValues(option.value, value)))],
...(optionsTransformer && {
originalOptions: [
...state.options,
...options.filter(({ value }) => !state.options.find((option) => payload.compareValues(option.value, value))),
],
originalOptions: [...state.options, ...options.filter(({ value }) => !state.options.find((option) => compareValues(option.value, value)))],

Check warning on line 49 in packages/common/src/use-select/reducer.js

View check run for this annotation

Codecov / codecov/patch

packages/common/src/use-select/reducer.js#L49 

Added line #L49 was not covered by tests
}),
};
default:
Expand Down
21 changes: 14 additions & 7 deletions packages/common/src/use-select/use-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useReducer } from 'react';
import { useEffect, useReducer, useState } from 'react';

import isEqual from 'lodash/isEqual';

Expand Down Expand Up @@ -58,7 +58,7 @@
const useSelect = ({
loadOptions,
optionsTransformer,
options: propsOptions,
options: initialOptions = [],

Check warning on line 61 in packages/common/src/use-select/use-select.js

View check run for this annotation

Codecov / codecov/patch

packages/common/src/use-select/use-select.js#L61 

Added line #L61 was not covered by tests
noValueUpdates,
onChange,
value,
Expand All @@ -69,8 +69,15 @@
simpleValue,
compareValues,
}) => {
const [state, originalDispatch] = useReducer(reducer, { optionsTransformer, propsOptions }, init);
const dispatch = (action) => originalDispatch({ ...action, optionsTransformer });
const [propsOptions, setPropsCache] = useState(initialOptions);
const [state, originalDispatch] = useReducer(reducer, { optionsTransformer, propsOptions: initialOptions }, init);
const dispatch = (action) => originalDispatch({ ...action, optionsTransformer, compareValues });

useEffect(() => {
if (!isEqual(initialOptions, propsOptions)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can it lead to performance issues? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For massive arrays of options it could, but as it stands infinite render loops are way worse.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, they are 😄

setPropsCache(initialOptions);
}
}, [initialOptions]);

const isMounted = useIsMounted();

Expand Down Expand Up @@ -114,7 +121,7 @@
}, [loadOptionsStr, loadOptionsChangeCounter]);

useEffect(() => {
if (state.isInitialLoaded) {
if (!isEqual(state.options, propsOptions) && state.isInitialLoaded) {
if (!noValueUpdates && value && !propsOptions.map(({ value }) => value).includes(value)) {
onChange(undefined);
}
Expand All @@ -125,14 +132,14 @@

const onInputChange = (inputValue) => {
if (inputValue && loadOptions && state.promises[inputValue] === undefined && isSearchable) {
dispatch({ type: 'setPromises', payload: { [inputValue]: true, compareValues } });
dispatch({ type: 'setPromises', payload: { [inputValue]: true } });

loadOptions(inputValue)
.then((options) => {
if (isMounted.current) {
dispatch({
type: 'setPromises',
payload: { [inputValue]: false, compareValues },
payload: { [inputValue]: false },
options,
});
}
Expand Down
Loading