Question

0

112

Views

Display Toast without using useEffect to control the state in react

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>
  );
}

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-12T03:32:32.336Z

This is good question

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

On mount, the first useEffect will fetch and call setItems
This state change will trigger one re-render and update items
The second useEffect will then run since items is a dependency and call setShow.
This is another state change and will trigger a re-render to update show
Your Toast will then show (if items.length > 0)

Alternatively, without the second effect

On mount, the first useEffect will fetch and call setItems
This state change will trigger one re-render and update items
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.

Answer 2 · 2022-07-12T03:32:32.342Z

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>

0

112