Почему выполняется функция при изменении состояния в компоненте react?

Question

[AvKa3003]

const [searchQuerry, setSearchQuerry] = useState('')
const sortedPosts = getSortedPosts()

Есть компонент с состоянием searchQuerry привязанным к одному кастомному input двухсторонним связыванием. Не каких взаимодействий больше нет, функционал ещё не реализован.

Я пока плохо понимаю как работает перерисовка.

Вопрос. Почему когда изменяется это состояние, выполняется функция getSortedPosts изменяющая sortedPosts который является пропсом и соответственно перерисовывается другой компонент. Повторю что это состояние не с чем пока ни связано кроме своего input.

На случай если нужен полный компонент:

import React, { useState } from 'react';
import PostForm from './components/PostForm';
import PostList from './components/PostList';
import MyInput from './components/UI/input/MyInput';
import MySelect from './components/UI/select/MySelect';
import './styles/App.css'

function App() {
  const [posts, setPosts] = useState([
    {id: 1, title: 'Javascript', body: '<3'},
    {id: 2, title: 'C#', body: 'Братка'},
    {id: 3, title: 'Python', body: 'dasdsa'}
  ]);

  const [selectedSort, setSelectedSort] = useState('')
  const [searchQuerry, setSearchQuerry] = useState('')
  const sortedPosts = getSortedPosts()
  // const sortedPosts = posts;
  // const asd = 'asdd'

  const createPost = (newPost) => {
    setPosts([...posts, newPost]);
  }

  const removePost = (post) => {
    setPosts(posts.filter(p => p.id !== post.id))
  }
  
  const sortPosts = (sort) => {
    setSelectedSort(sort);
  }

  function getSortedPosts() {
    console.log('getSortedPosts')
    if(selectedSort) {
      return [...posts].sort((a, b) => a[selectedSort].localeCompare(b[selectedSort]))
    }
    return posts
  }

  return (
    <div className="App">
      <PostForm create={createPost}/>
      <hr style={{margin: '15px 0'}} />
      <div>
        <MyInput placeholder="Поиск" value={searchQuerry} onChange={e => setSearchQuerry(e.target.value)}/>
        <MySelect 
          value={selectedSort}
          onChange={sortPosts}
          defaultValue="Сортировка" 
          options={[
            {value: 'title', name:'По названию'},
            {value: 'body', name:'По описанию'}
          ]}
        />
      </div>
      {posts.length
        ? 
          <PostList remove={removePost} posts={sortedPosts} title="Список постов"/>
        : 
          <h1 style={{textAlign: 'center'}}>Посты не найдены.</h1>
      }
    </div>
  );
}

export default App;

Comments

[AvKa3003]

Уточню что функция выполняется при изменении любого состояния.

Answer 1

[Nikolay Matyushkin]

Вы запускаете эту функцию, когда присваиваете её выполнение константе sortedPosts.
Сколько раз перерендерили компонент, столько раз и запустили эту функцию

Comments

[AvKa3003]

Получается при изменении одного из состояний перерисовывается весь компонент? В данном случае App. Я думал перерисовываются элементы зависящие от изменённого props и state.

[Nikolay Matyushkin]

Весь компонент. Чтобы перерисовку привязать к изменению каких-либо данных, нужно использовать useCallback

[WbICHA]

Nikolay Matyushkin, только вот в данном случае, очевидно, нужен юзМемо.

[AvKa3003]

WbICHA, он там будет