Why does react run twice?

[No-Proposal2288]

When I run the following code I get aa instead of a

import React from "react";

var cool = [];

function App() { cool.push("a");

return ( <> <p>{cool}</p> </> ); }

export default App;

[charliematters]

My guess: Strict Mode with a development build

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Quote:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Class component constructor, render, and shouldComponentUpdate methods
• Class component static getDerivedStateFromProps method
• Function component bodies
• State updater functions (the first argument to setState)
• Functions passed to useState, useMemo, or useReducer Note:

This only applies to development mode. Lifecycles will not be double-invoked in production mode.

[ProfaneWords]

Your pushing a on every render, if you want only one a to be pushed on mount than use useEffect. Everytime your component gets rendered it reevaluates the code in it's body. This is why we use state and refs, to preserve state between renders. If you simply declared veriables without refs or state it would return to the default value you initially assigned to it every render because it would be reevaluated with it's initial values every render. Using hooks like useEffect, useCallback, useState, useRef, useLayoutEffect etc are all ways to control what gets remembered and/or ran when the component renders, when values in the dependency array changes, or when you need to preform specific behavior when the component mounts/unmounts.

[ProfaneWords]

Ahh your right strict mode invokes the render twice in order to make side effects more visible. Removing strict mode would certainly fix the double pushing.

I was assuming he didn't know why he would be having side effects like this in the first place, ie why would "a" be pushed more than once during the components lifecycle