after refresh the page state lost his value

Question

so I try to build a home page to my web which is include few category of books I try to get the books from my data-base and save them in the state and filter each of them and put him in the correct category but I get inside a few problems when I try to do a axios.get inside a useEffect

1. first problem is I get inside a infinity loop if I don't put the Square brackets [] in the end useEffect
2. the second problem is if I put the Square brackets ig the first time useEffect work every thing is ok i get the state and map them to the web but when i reload the page I get an empty page whet is mean that something happened to the state value

I add here the code from my homePage component
I try to do the useEffect in 2 ways but there is no difference in the results

import React, { useEffect, useState } from "react";
import axios from "axios"
import { useNavigate } from "react-router-dom";
import BookItem from "../bookItem/bookItem";
import './Home.css'

function HomePage() {
    const [books, setBooks] = useState([])
    const [comedyBooks, setComedy] = useState([])
    const [sportBooks, setSport] = useState([])
    const [actionBooks, setAction] = useState([])


    let navigate = useNavigate();

//option 1
    // useEffect(() => {
    //     axios.get('http://127.0.0.1:3000/books')
    //         .then(res => {
    //             setBooks(res.data.data.books)
    //             let comedyBook = []

    //             comedyBook = books.filter(el => el.categories == 'comedy')
    //             setComedy(comedyBook)
    //             let sportBook = []
    //             sportBook = books.filter(el => el.categories == 'sport')
    //             setSport(sportBook)
    //             let actionBook = []
    //             actionBook = books.filter(el => el.categories == 'action')
    //             setAction(actionBook)
    //         })
    // }, [])

//option 2
    useEffect(() => {
        let comedyBook = []
        let sportBook = []
        let actionBook = []
        console.log('ssss')

        axios.get('http://127.0.0.1:3000/books')
            .then(res => {
                setBooks(res.data.data.books)
            }).then(() => {
                comedyBook = books.filter(el => el.categories == 'comedy')
                sportBook = books.filter(el => el.categories == 'sport')
                actionBook = books.filter(el => el.categories == 'action')
            }).then(() => {
                setComedy(comedyBook)
                setSport(sportBook)
                setAction(actionBook)
            })
    }, [])



    return (
        <div className="home-container">
            <p className="title-cat">Comedy Books</p>
            <div className="line-bottom"></div>
            <div className="books">
                {comedyBooks.map(item => {
                    return <BookItem key={item._id} item={item} />
                })}
            </div>

            <p className="title-cat">Sport Books</p>
            <div className="line-bottom"></div>
            <div className="books">
                {sportBooks.map(item => {
                    return <BookItem key={item._id} item={item} />
                })}
            </div>

            <p className="title-cat">Action Books</p>
            <div className="line-bottom"></div>
            <div className="books">
                {actionBooks.map(item => {
                    return <BookItem key={item._id} item={item} />
                })}
            </div>
        </div>
    )
}

export default HomePage

so i get a few questions there is a problem to use setState inside use effect? useEffect dont work after reload page?

Answer 1

1. when updating the state inside useEffect you need to have the dependency array [] as the second parameter in the useEffect function otherwise you will have an infinite loop as you said. in your case the dependency array is empty which means the useEffect function will run only once when the page is first loaded.

2. and for the other part of your question when you update an array in useState you can use the spread operator ... like:

   setBooks(books => [ ...books, res.data.data.books]);