我正在学习ReactJS。我想使用功能组件。在我的组件中，我有一个文本框和一个清除按钮。

我担心的是-每当我从键盘上输入字符以输入文本框的信息时，我都会search account called!!!在控制台输出中看到。如果我输入5个字符，我会看到5次-从根本上来说，这意味着整个组件都已重新呈现且方法已重新定义。

这不是不好的做法，并且会影响性​​能吗？还有其他选择吗？

import React, { useState, useContext } from 'react';
import AccountContext from . './accountContext'

const SearchAccounts = () => {
    
    const [text, setText] = useState('');
    const onChange = (evt) => setText(evt.target.value);

    console.log('search account called!!!');
    
    // some methods are defined here
    onSubmit = () => {...}
    onClear = () => {...}

    return (
        <div>
            <form onSubmit={onSubmit} className="form">
                <input 
                    type="text" 
                    name="text" 
                    value={text} 
                    onChange={onChange}
                    placeholder="Search Accounts..." 
                />
                <input type="submit" value="Search" className="...." />
            </form>
            <button 
                className="...."
                onClick={onClear}
                style={getClearStyle()}
            >Clear</button>
        </div>
    );

}

export default SearchAccounts;