Как правильно организовать работу компонента (useEffect и вызов API)?

Question

[Павел]

Здравствуйте, подскажите, как правильно построить работу компонента с вызовом API.
Вот сам код, и один из вариантов работы useEffect(), в этом случае, я в рендер получаю старый state.

В этом варианте приходит старый state

const [category, setCategory] = useState([]);

    const {id} = useParams();

    useEffect(() => {
        getCategory();
    }, [id]);  
  
    const getCategory = async () => {
        const params = { 
                    id: id 
                };
     
        const data = await API.getOne('category', params); 
        setCategory(data);
    }

Если useEffect следит за стейтом category , естественно, происходит зацикливание.

Так получается зацикливание

useEffect(() => {
        getCategory();
    }, [category]);

Вариант, который с виду работает, но компонент ререндериться два раза, что нельзя назвать решением :)

Ререндер

useEffect(() => {
        getCategory();
    }, [id]);  

    useEffect(() => {
            document.title = category.title;
    }, [category.title]);

Решение явно должно быть простое :)
Но я программист HTML , поэтому тут его не вижу..))

Answer 1

[Kirill Makarov]

const {id} = useParams();
const [category, setCategory] = useState([]);


  
    const getCategory = async () => {
        const params = { 
                    id: id 
                };
     
        const data = await API.getOne('category', params); 
        setCategory(data);
    }


    useEffect(() => {
        getCategory();
    }, [id]);

Comments

[Kirill Makarov]

так должно работать