🐛 Fix Shadcn/ui lint error

epigram5-9 · Jul 7, 2024 · a9c4604 · a9c4604
1 parent 249dafb
commit a9c4604
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -29,8 +29,7 @@ module.exports = {
     'no-console': 'error',
     'react/jsx-props-no-spreading': 'off',
     'no-use-before-define': 'off',
-    '@typescript-eslint/no-use-before-define': ['error', { variables: false, functions: false, classes: false }],
-    'react/jsx-no-constructed-context-values': 'off',
+    '@typescript-eslint/no-use-before-define': ['off'],
   },
   settings: {
     react: {

diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
@@ -15,8 +15,9 @@ type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName
 const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) {
+  const value = React.useMemo(() => ({ name: props.name }), [props.name]);
   return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
+    <FormFieldContext.Provider value={value}>
       <Controller {...props} />
     </FormFieldContext.Provider>
   );
@@ -53,8 +54,9 @@ const FormItemContext = React.createContext<FormItemContextValue>({} as FormItem
 
 const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
   const id = React.useId();
-
   return (
+    // NOTE: React.useId()이기 때문에 useMemo로 감쌀 필요가 없음
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
     <FormItemContext.Provider value={{ id }}>
       <div ref={ref} className={cn('space-y-2', className)} {...props} />
     </FormItemContext.Provider>