Javascript 我将JSS样式放在定制的React钩子中。这不好吗？

我一直在努力寻找一种方法来制作一个可靠的可重用搜索栏组件。我试着为它做一个组件。但是，此组件无法保持其自身的状态。这意味着您将有两个导入使用此搜索栏。大概是这样的：

import React, { useState } from 'react';
import SearchBar from './SearchBar';

const Parent = () => {
   const [value, setValue] = useState("");

   return (
      <div>
         <SearchBar ...use 'value' and 'setValue' somehow... blah blah... />
         {list.map((item) => ...render item if it matches 'value'...)}
      </div>

}

import React form 'react';
import { useSearchBar } from '../hooks/useSearchBar';

const Component = () => {

   const { bindSearchBar, value } = useSearchBar();

   return <input {...bindSearchBar} />;

}

最简单的实现如下所示：

import React, { useState } from 'react';
import SearchBar from './SearchBar';

const Parent = () => {
   const [value, setValue] = useState("");

   return (
      <div>
         <SearchBar ...use 'value' and 'setValue' somehow... blah blah... />
         {list.map((item) => ...render item if it matches 'value'...)}
      </div>

}

import React form 'react';
import { useSearchBar } from '../hooks/useSearchBar';

const Component = () => {

   const { bindSearchBar, value } = useSearchBar();

   return <input {...bindSearchBar} />;

}

导入React表单'React'；
从“../hooks/useSearchBar”导入{useSearchBar}；
常量组件=（）=>{
const{bindSearchBar，value}=useSearchBar（）；
返回；
}

---

我需要一份清单，但我想你明白了。我有一种奇怪的感觉，觉得这件事出了严重的问题。我很确定我现在会喜欢它，但6个月后我会恨我自己。有谁能告诉我这里可能出了什么问题，或者为什么这可能是一种不好的做法？或者您认为以这种方式使用钩子是可行的吗？

在钩子中创建jss类没有什么错。useStyles是一个钩子，自定义钩子的属性是在其中使用其他钩子

除此之外，这里还有一个性能提示

export const useSearchBar = () => {
    const [value, setValue] = useState('');
    const classes = useStyles();
    
    //wrap with a useMemo to prevent recreation of the props when the container rerender
    const searchBarProps = React.useMemo(()=>({
        value,
        setValue,
        reset: () => setValue(""),
        bindSearchBar: {
            type: 'text',
            className: classes.searchBar,
            placeholder: 'Search',
            value,
            onChange: (event: {target: {value: string}}) => {
                setValue(event.target.value);
            }
        }
     }),[value, classes]);  

    return searchBarProps;
};