# React: Correct way to handle a component refresh on post request

**URL:** <https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [March 27, 2022, 10:56am UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426 "2022-03-27T10:56:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![aidycodes](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@aidycodes](https://forum.freecodecamp.org/u/aidycodes)\
**Post date:** [March 27, 2022, 10:56am UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/1 "2022-03-27T10:56:10Z")

</div>

hey there hopefully someone can point me in the right direction cause i’m a little confused and its been hard to find ‘best practice for handling this in react’

An Example:

I have a image being displayed via url in a react component.  
the react component is getting the URL from an get request API call.  
the user then updates that image by a post request replacing the previous url with a new URL.  
the component will not display the updated URL, react will not re-render the page cause its not aware of the change (its not a state update) , How would I tell the component hey update now please the server db data has changed!

possible solutions I have thought of but I’m not sure if any or which is ‘correct’ or best.

using a submit button without calling e.preventdefault or  
using window.locate.rerfresh() to force a page refresh .

creating a piece of state and then on success of post request overwriting the state inside the app manually.

maybe I’m overthinking this but both solutions feel kind of clumsy to me right now and would love some advice here on how others approach this

thanks!

---

<div class="post-metadata">

**Author:** ![adramelech](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adramelech/32/230563_2.png) [@adramelech](https://forum.freecodecamp.org/u/adramelech)\
**Post date:** [March 27, 2022, 12:27pm UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/2 "2022-03-27T12:27:52Z")

</div>

You are supposed to store the url as a state and update the state along with the post request. Thats what state is meant for.

> [@aidycodes](#):
>
> using a submit button without calling e.preventdefault

If you do it your post request will not even get triggered.

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 27, 2022, 12:37pm UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/3 "2022-03-27T12:37:16Z")

</div>

```auto
const Example = () => {
  const [url, setUrl] = useState("");
  useEffect(() => {
    // make a request here, then
    // if it works then
    if (checkUrlHasChanged || url !== "") {
      setUrl(theDataYouGot);
    }
  }, [url]);

  return {
    // component JSX 
  };
};

```

Every time `url` changes, the component will rerender

(edited for clarity re. @adramelech comment)

---

<div class="post-metadata">

**Author:** ![adramelech](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adramelech/32/230563_2.png) [@adramelech](https://forum.freecodecamp.org/u/adramelech)\
**Post date:** [March 27, 2022, 1:35pm UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/4 "2022-03-27T13:35:44Z")

</div>

> [@DanCouper](#):
>
> ```auto
> useEffect(() => {
> // make a request here, then
> // if it works then
> setUrl(theDataYouGot);
> }, [url]);
> 
> ```

Be careful on that dependency array

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 27, 2022, 1:57pm UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/5 "2022-03-27T13:57:06Z")

</div>

It’s essentially pseudocode (although it needs to run every time the URL changes, so it has to at least include that). It can’t only be that because the mechanism for the user submitting information isn’t specified.

---

<div class="post-metadata">

**Author:** ![adramelech](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adramelech/32/230563_2.png) [@adramelech](https://forum.freecodecamp.org/u/adramelech)\
**Post date:** [March 27, 2022, 1:58pm UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/6 "2022-03-27T13:58:46Z")

</div>

changing a state inside a useEffect having the same state as dependency causes infinite rerender, isn’t it ?

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 27, 2022, 2:31pm UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/7 "2022-03-27T14:31:58Z")

</div>

Ah, I’m just assuming that there’s some logic to check inside the useEffect, edited the pseudocode

---

<div class="post-metadata">

**Author:** ![aidycodes](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@aidycodes](https://forum.freecodecamp.org/u/aidycodes)\
**Post date:** [March 27, 2022, 2:46pm UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/8 "2022-03-27T14:46:22Z")

</div>

thanks guys that helped, having a piece of state and then setting it to the response from the post is the correct method when possible. I think my overall confusion came from not utilizing context/global state it seems pretty obvious to me now xD

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [September 26, 2022, 2:46am UTC](https://forum.freecodecamp.org/t/react-correct-way-to-handle-a-component-refresh-on-post-request/502426/9 "2022-09-26T02:46:31Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.