React рендерит полный компонент вместо того, что изменилось при использовании функции-оболочки

Question

Я наблюдал ниже при рендеринге компонента списка. Компонент списка берет реквизит для поиска и фильтрует его перед рендерингом.

 <UserList pattern={search}/>

при использовании вышеприведенного оператора непосредственно внутри родительского компонента, он отображает только то, что изменилось, на основе реквизита поиска (список остается и удаляются только несоответствующие элементы)

Но когда я обертываю UserList в другой функции, как показано ниже:

const Users = ()=>  <UserList pattern={search}/>;

и использую <Users/> в родительском компоненте, я вижу, что весь компонент списка перерисовывается при изменении реквизита поиска. Поле поиска является локальным состоянием (useState ['']).

, поэтому родительский компонент теперь выглядит следующим образом:

const App = () => {
const [search, setSearch] = useState('');

const Users = ()=>  <UserList pattern={search}/>;

return (
    <div id="app" className="home-page">
      <Header />
      <WelcomeSlogan/>
      <Users/>
    </div>
  );
}

Итак, мы знаем, что response возвращает полный дочерний компонент ( s) если родительский компонент изменился, но как именно меняется родительский элемент (<Users>)? Может кто-нибудь объяснить, чтобы помочь мне лучше понять? Спасибо.