0

I am testing this React Rest service code. When I open the page, I see it's making two calls to REST server.

Code to call the server API

export const App = (): React.FC<user[]> => {
  const [user, setUser] = useState<user | undefined>();
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => setUser(json));
  }, []);

Here is the full article: https://cynoteck.com/blog-post/how-to-call-web-api-with-useeffect-hook-in-react-typescript/#What_is_a_RESTful_API

I also tested this with my local machine REST service, it's making two calls.

May I know how to prevent this duplicate request?

Browser image: enter image description here

cigien
  • 57,834
  • 11
  • 73
  • 112
sfgroups
  • 18,151
  • 28
  • 132
  • 204
  • Does this answer your question? [Name with gear icon in Chrome network requests table](https://stackoverflow.com/questions/48336926/name-with-gear-icon-in-chrome-network-requests-table) Seems like you are using `msw` or something like that – Konrad Aug 08 '22 at 22:26
  • this exact question is asked several times a week [Why is my React component is rendering twice?](https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice) – Andy Ray Mar 16 '23 at 19:32

1 Answers1

-1

this is a new behavior that was added on react version 18, it only happens on development and exactly when using strict mode, it will not occur on production,

I think they added this behavior (mounting and unmounting components twice on the first render), to catch some bugs (when not cleaning some subscription you put on the useEffect).

Lakhdar
  • 377
  • 2
  • 8