在 React 中将数据传递给父级时，根据子级操作重新渲染子组件

Question

I have a Parent Component where I make an Ajax call to hydrate two children Components. C1 only needs the data once, C2 actually is able to get more data through additional Ajax calls and will be re render adequately.

It is way easier for me to make the Ajax Call in my Parent Component. But then I can't figure out how to 'get more data' in C2, pass that data in Parent and finally re render C2 only. I had many tries through callbacks (you can see it in the code), lifting state up etc, I am unable to do it. I don't know what to do with useEffect either...

Some code:

const Reviews: FunctionComponent = () => { 
    let variables = {
        offset: 0,
        limit: 2,
        filter: filter,
        order: order
    }

    useEffect(() => {
        console.log("useEffect called");
    });

    const {data: dataReviews, loading: loadingReviews, error: errorReviews} = useQuery(GetReviews, {
        ssr: false,
        variables: variables
    });

    function parentCallback(offset: number, limit: number) {
        variables.offset = offset;
        variables.limit = limit;
    }

    if (!loadingReviews && !errorReviews && dataReviews) {
        let reviews = !loadingReviews && !errorReviews && dataReviews ? dataReviews.reviews[0] : null;
        const stats = reviews.stats;

        reviews = reviews.reviews;

        return (
            <div className={`${styles.netreviews_review_rate_and_stars}`}>
                <ReviewsSideInfo stats={stats}
                                 total={getRecommandation(stats).total}
                                 recommandation={getRecommandation(stats).percentageRecommandation}
                />
                <ReviewsContainer parentCallback={parentCallback} reviews={reviews}/>
            </div>
        );
    }
    return (<div></div>);
}
export default Reviews;

As you can see <ReviewsSideInfo/> (C1) relies on that Ajax call (using stats object), and so does <ReviewsContainer /> (C2), but in C2 ->:

const ReviewsContainer: FunctionComponent<ReviewsContainerProps> = ({reviews, parentCallback}) => {
    const [{offset, limit}, setReviews] = useState({offset: 0, limit: 3});
        
    return (
        <div className={`${styles.right_block}`}>
            <div className={`${styles.reviews_list}`}>

                <Fragment>
                    {reviews.map((element, i) => {
                        return (
                            <div>
                                <div key={i}>
                                    <Review rate={element.rate}
                                            firstname={element.firstname}
                                            lastname={element.lastname}
                                            review={element.review}
                                     />
                                </div>
                            </div>
                        )
                    })}
                    <button onClick={() => {
                        setReviews({offset: 0, limit: limit + 3});
                        parentCallback(0, limit + 3)
                    }}>
                        <FormattedMessage id="load-more"/></button>
                </Fragment>
            </div>
        </div>
    )
}

-> I need to be able to load more data. Sorry for the long piece of code. How can I achieve that? I know useReducer may be of help but it seems even more difficult to me since I'm new to React.

Last thing: in C1, I need to be able to filter that data (per rating) so I need to find a way to communicate through all these components... same problem actually.

EDIT : I could have updated the state in Parent component but then the whole component would refresh and that's not what I want (already tried that)

Answer 1

Did you try wrapping your component with

React.memo(your component)

I will look something like below:

const MemoisedComponent = React.memo(ReviewsSideInfo);




<div className={`${styles.netreviews_review_rate_and_stars}`}>
                <MemoisedComponent stats={stats}
                                 total={getRecommandation(stats).total}
                                 recommandation={getRecommandation(stats).percentageRecommandation}
                />
                <ReviewsContainer parentCallback={parentCallback} reviews={reviews}/>
            </div>

Also in

parentCallback(offset,limit) {
setOffset(offset)
setLimit(limit)
}

below useEffect will only be called when the offset and limit value is changed.

useEffect(() => {
//api call logic 
},[offset,limit]);

below is how your state should look like:

const [offset,setOffset] = useState(0)
const [limit,setLimit] = useState(3)
...and so on