Trigger parent API call from child in react

Question

In my parent(Feed) I display a list of posts:

function Feed() {

    const [posts, setPosts] = useState(null);

    useEffect(() => {
        const fetchPosts = async () => {
            try {
                const result = await axios({
                ...
                });
    
                setPosts(result.data);
                ...
            } catch (e) {
                ...
            }
        };
        fetchPosts();
    }, []);

    return (
        ...
            {posts &&
                <div>
                    <PostCompose />                              // post creation
                    {posts.map((item, index) =>                  // map existing posts
                        <Post key={item._id} {...item} />)}      
                </div>
            }
        ...
    )
}

The child(PostCompose) can create a post:

function PostCompose() {

    const [text, setText] = useState('');

    const createPost = async () => {
        try {
            const result = await axios({
                ...
            })
            ...
        } catch (e) {
            ...
        }
    }

    const handleTextChange = (e) => {
        setText(e.target.value);
    }

    return (
        ...
        <textarea onChange={handleTextChange} />
        <button onClick={createPost}>Post</button>
        ...
    )
}

The PostCompose component makes the requests to the backend to create the new posts, but how do I trigger the Feed to refresh to pull the new list of posts?

I feel like my approach might need some work, any help would be great as I'm very new to React. Thanks.

Answer 1

One way would be to take your fetchPosts function out of the effect callback, using theuseCallback hook to memoize it. You can now invoke fetchPosts when the Feed component mounts and provide it to your PostCompose component, as I've done here with the afterPostCreated prop:

function Feed() {
    const [posts, setPosts] = useState(null);

    const fetchPosts = useCallback(async () => {
        try {
            const result = await axios({
                // ...
            });

            setPosts(result.data);
            // ...
        } catch (e) {
            // ...
        }
    }, []);

    useEffect(() => {
        fetchPosts();
    }, [fetchPosts]);

    return (
        posts && (
            <div>
                <PostCompose afterPostCreated={fetchPosts} /> // post creation
                {posts.map(
                    (
                        item,
                        index // map existing posts
                    ) => (
                        <Post key={item._id} {...item} />
                    )
                )}
            </div>
        )
    );
}

Then simply invoke that callback in your PostCompose component, after the post was successfully created:

function PostCompose({ afterPostCreated }) {
    const [text, setText] = useState('');

    const createPost = async () => {
        try {
            const result = await axios({
                // ...
            });
            // ...

            if (afterPostCreated) {
                afterPostCreated();
            }
        } catch (e) {
            // ...
        }
    };

    const handleTextChange = (e) => {
        setText(e.target.value);
    };

    return (
        <>
            <textarea onChange={handleTextChange} />
            <button onClick={createPost}>Post</button>
        </>
    );
}