Function App() { const [posts, setPosts] =

useState([
{id: 1, title: 'Aavascript', body: 'wescription'},
{id: 2, title: 'Wavascript 1', body: 'rescription 1'},
{id: 3, title: 'Lavascript 2', body: 'hescription 2'},
])

const [selectedSort, setSelectedSort] = useState('')
const [searchQuery, setSearchQuery] = useState('')


function getSortedPosts() {
console.log('Sort function done')

if (selectedSort) {
return [...posts].sort((a,b) => a[selectedSort].localeCompare(b[selectedSort]))
}
return posts
}

const sortedPosts = getSortedPosts();

const changeSortFilter = (sort) => {
setSelectedSort(sort)
console.log(sort)
}

const onSearch = (e) => {
setSearchQuery(e.target.value)

}

return (
<div className="App">
<MyInput
value={searchQuery}
onChange={onSearch}
placeholder="Search by"
/>
<MySelect
value={selectedSort}
onChange={changeSortFilter}
defaultValue="Sort by"
options={[
{value: 'title', name: 'By name'},
{value: 'body', name: 'By description'}
]}
/>
</div>
);
}

export default App;

Народ, есть такой код, идея такова что есть два useState, один отвечает за сортировку по списку, второй за поиск. Ф-ция getSortedPosts возвращает отсортированный масив и выводит в консоль сообщение если ф-ция сработала, но вопрос вот в чем: почему эта ф-ция срабатывает даже когда я пишу что-то в инпут она срабатывает тоже? Если по сути хук для изменения состояния поиска не участвует нигде?

const sortedPosts = getSortedPosts(); а это что?

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

Как не участвует? onSearch вызывает setSearchQuery

Да, это верно. Но почему-то ф-ция getSortedPosts() вызывается когда я меняю его, хотя searchQuery нигде не замечен в функции

Компонент ререндерится каждый раз, когда любой хук изменяется

а, теперь понял, спасибо