|
3 | 3 | import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; |
4 | 4 | import * as SelectPrimitive from '@radix-ui/react-select'; |
5 | 5 | import classNames from 'classnames'; |
6 | | -import { useEffect, useId, useMemo, useState } from 'react'; |
| 6 | +import { useId, useMemo, useState } from 'react'; |
7 | 7 |
|
8 | 8 | import Skeleton from '#ui/Common/Skeleton'; |
9 | 9 | import { isStringArray, isValuesArray } from '#ui/util/array'; |
@@ -63,8 +63,6 @@ const Select = <T extends string>({ |
63 | 63 | const id = useId(); |
64 | 64 | const [value, setValue] = useState(defaultValue); |
65 | 65 |
|
66 | | - useEffect(() => setValue(defaultValue), [defaultValue]); |
67 | | - |
68 | 66 | const mappedValues = useMemo(() => { |
69 | 67 | let mappedValues = values; |
70 | 68 |
|
@@ -118,10 +116,7 @@ const Select = <T extends string>({ |
118 | 116 | ))} |
119 | 117 | </SelectPrimitive.Group> |
120 | 118 | )); |
121 | | - // We explicitly want to recalculate these values only when the values themselves changed |
122 | | - // This is to prevent re-rendering and re-calcukating the values on every render |
123 | | - // eslint-disable-next-line react-hooks/exhaustive-deps |
124 | | - }, [JSON.stringify(values)]); |
| 119 | + }, [mappedValues]); |
125 | 120 |
|
126 | 121 | // Both change the internal state and emit the change event |
127 | 122 | const handleChange = (value: T) => { |
|
0 commit comments