React useState не выполняет повторный рендеринг, пока он ссылается на клонированный массив путем распространения

Когда компоненты не перерисовываются, это почти всегда происходит из-за мутаций состояния. Здесь вы вызываете операцию мутации .sort на reviews. Вам нужно будет распространить массив перед, вы его измените.

useEffect(() => {
  const sortedReviews = [...reviews].sort((review1: IReview, review2: IReview) =>
    sortBy(review1, review2, sortRule)
  );

  setReviews(sortedReviews);
}, [sortRule]);

Но здесь есть и другие проблемы. reviews не является зависимостью от useEffect, поэтому мы хотели бы использовать обратный вызов setReviews, например setReviews(current => [...current].sort(....

В целом отсортированные данные имеют больше смысла для useMemo, чем для useState. sortRule - это состояние, а sortedReviews - производные от него.

То, как вы вызываете sortBy в качестве функции сравнения, кажется немного странным. Может это просто сбивающее с толку имя?

Также вам не нужно включать тип IReview в обратный вызов, если book правильно набран как {reviews: IReview[]}.

Если вы включите свою функцию sortBy и переменную sortRule, я могу вам больше помочь. Но вот что я придумал.

import React, { useState, useMemo } from "react";

type IReview = {
    rating: number;
}

type Book = {
    reviews: IReview[]
}

type SortRule = string; // just a placeholder - what is this really?

declare function sortBy(a: IReview, b: IReview, rule: SortRule): number;

const MyComponent = ({book}: {book: Book}) => {
    const [sortRule, setSortRule] = useState("");

    const reviews = book.reviews;

    const sortedReviews = useMemo( () => {
        return [...reviews].sort((review1, review2) =>
            sortBy(review1, review2, sortRule)
        );
    }, [sortRule, reviews]);
...
}

Ссылка на игровую площадку с машинописным текстом

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

Первое решение:

const [reviews, setReviews] = useState([...book.reviews]);

    useEffect(() => {
        const sortedReviews = [...reviews]
            .sort((review1: IReview, review2: IReview) =>
                sortBy(review1, review2, sortRule));

        setReviews(()=> [...sortedReviews]) // <-- Here
        }, [sortRule])

второе решение: Вы можете использовать useRef для получения данных в реальном времени, см. Ниже:

    const [reviews, setReviews] = useState([...book.reviews]);
    const reviewsRef = useRef();
     
            useEffect(() => {
                const sortedReviews = [...reviews]
                    .sort((review1: IReview, review2: IReview) =>
                        sortBy(review1, review2, sortRule));
        
                setReviewRef([...sortedReviews]) 
                }, [sortRule])

function setReviewRef(data){
       setReview(data);
       reviewsRef.current = data;
    }  

Итак, вместо этого используйте состояние отзывы, используйте reviewsRef.current как массив u

Надеюсь, ты сможешь решить эту проблему!