I tried to add Toast from react-bootstrap into my application and I can make the functionality works with following code. However I am wondering if it is redundant to use useEffect to set show by setShow(items.length > 0);? Would it be just easier to do something like const show = items.length > 0; or any better way for me to approach?

example of fetch response
{
  "items": [
    { "id": 1, "name": "Apples",  "price": "$2" },
    { "id": 2, "name": "Peaches", "price": "$5" }
  ] 
}

import "./styles.css";
import React, { useState, useEffect } from "react";
import { Toast } from "react-bootstrap";

export default function App() {
  const [error, setError] = useState(null);
  const [show, setShow] = useState(false);
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch("https://api.example.com/items")
      .then((res) => res.json())
      .then(
        (result) => {
          setItems(result);
        },
        (error) => {
          setError(error);
        }
      );
  }, []);

  useEffect(() => {
    setShow(items.length > 0);
  }, [items]);
  // const show = items.length > 0? maybe?
  const toggleShowB = () => setShow(!show);
  return (
    <div className="App">
      <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
        <Toast.Header />
        <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
      </Toast>
    </div>
  );
}

CodePudding user response：

This is good question

Let's break down the order of operations for what you have:

1. On mount, the first useEffect will fetch and call setItems

2. This state change will trigger one re-render and update items

3. The second useEffect will then run since items is a dependency and call setShow.

4. This is another state change and will trigger a re-render to update show

5. Your Toast will then show (if items.length > 0)

Alternatively, without the second effect

1. On mount, the first useEffect will fetch and call setItems

2. This state change will trigger one re-render and update items

3. Your Toast will then show if show={items.length > 0}

Conclusion

You save yourself a re-render by not using the second useEffect to update a show state variable.

CodePudding user response：

Instead of using another useEffect hook, you can just use:

<Toast onClose={() => setShow(false)} show={items.length > 0 && show} delay={3000} autohide>

You can force it to close by changing the show. This works because react rerenders it every time items changes.

Edit

if you do not want to close it forcefully, just remove the && show.

<Toast show={items.length > 0} delay={3000} autohide>