How to use a function in React useEffect

Question

I want below code to be in React useEffect because every time things get changed I want the component to get rerender. But react does not allow useEffect in a function.

The below code is being toggled on click. Everything is working fine but the component does not reload so you need to switch between other components so that it gets updated.

const toggleFavorite = () => {
  if (docdata !== "") {
    db.collection("infodata")
      .doc(docdata)
      .set({
        favorite: !favoritePassword
      }, {
        merge: true
      });

    setFavoritePassword(!favoritePassword);
  }
};

<div onClick={toggleFavorite}>
  <FontAwesomeIcon icon={faStar} />
</div>

I have tried these: React useEffect in function React Async Function wrapped in a UseEffect

But these do not seem to work.

Any help will be appreciated,

Thank you.

Dharman · Accepted Answer · 2021-02-12 19:15:45Z

-1

you could do something like this:

const [toggle, setToggle] = useState(false);

const toggleFavorite = () => {
    if (docdata !== "") {
        db.collection("infodata")
            .doc(docdata)
            .set({
                favorite: !favoritePassword
            }, {
                merge: true
            });

        setFavoritePassword(!favoritePassword);
    }
};

useEffect(() => {
    toggleFavorite()
}, [toggle])

<div onClick={setToggle(!toggle)}>
    <FontAwesomeIcon icon={faStar} />
</div>

edited Feb 12, 2021 at 19:15

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Feb 12, 2021 at 19:10

jcmujica

916 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use a function in React useEffect

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related