useState vs. useEffect - setting initial value

Question

I have two basic questions about React:

1. In order to assign an initial empty value to a piece of state (let's say player) in a functional component, are the following two approaches the same or are they different in some way?

Approach A:

const [player, setPlayer] = useState({})

Approach B:

useEffect(() => {
    setPlayer({})
}, []);

2. When I browse to a player, the page is eventually updated with values coming from the global store so I need to avoid showing the values of the previous player while the current one is still loading. What is the best way to go about this?

---

Please let me know if you need more background information in order to help.
Thank you in advance!

Answer 1

When assigning initial value directly in useState(initialData) you are making that state available in the very first render.

On the other hand, if you are setting the initial value in a useEffect hook, it will be set on mount, but after the very first render.

useEffect(() => {
    setPlayer(initialData)
}, [])

If the state variable is important also for the first render, then you should use the first approach. It is also shorter to write and makes more sense.

Example:

if you open your devtools when running this example, the debugger will pause inside the useEffect and you will see nothing will be rendered on the first render, which might not be desirable. If you were to edit the code and do useState(initialData) it would see the first render did include the correct state when the debugger breaks.

const {useState, useEffect} = React

const App = ({initialData}) => {
  const [value, setValue] = useState('?') 

  useEffect(() => {
    debugger; // at this point, the component has already been rendered
    setValue(initialData)
  }, [])

  return value
}

ReactDOM.render(<App initialData={'?'} />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>