Why the initial loading state is set to true while using useState?

Admin 1
Viewed 1841

I'm confused why the isLoading flag is set to true in the initial state. Isn't it supposed to be false initially? Consider this simple example:

const SearchCharity = () => {
  const [isLoading, setIsLoading] = useState(true)
  const [themes, setThemes] = useState([])

  useEffect(() => {
    const fetchThemes = async () => {
      try {
        setIsLoading(true)

        const result = await axios.get(url)
        setThemes(result.data.themes.theme)

        setIsLoading(false)
      } catch (err) {
        console.log(err)
      }
    }
    fetchThemes()
  }, [])

  return (
      {
        isLoading ? <h1>Loading......</h1> : <h1>Display Content</h1>
      }
    )

export default SearchCharity

Another thing it, if we set it to true or false initially in the above code, the useEffect still runs the same and the result on the screen will also be the same. So, why true? Is this some sort of standard?

use-state use-effect react-hooks reactjs javascript
3 Answers

The value you pass when initializing state is up to you.

If you want it to be initialized as true you pass true like this.

const [isLoading, setIsLoading] = useState(true)

If you want you can also pass false and it will be initialized as false

const [isLoading, setIsLoading] = useState(false)
user_31618110 
  const [isLoading, setIsLoading] = useState(true)
  const [themes, setThemes] = useState([])

  useEffect(() => {
    const fetchThemes = async () => {
      try {
        const result = await axios.get(url)
        setThemes(result.data.themes.theme)

        setIsLoading(false)
      } catch (err) {
        console.log(err)
      }
    }
    fetchThemes()
  }, [])

  return (
      {
        isLoading ? <h1>Loading......</h1> : <h1>Display Content</h1>
      }
    )

export default SearchCharity

More info: https://reactjs.org/docs/handling-events.html

user_97596670

You are asking about the reason that you did set this initial value yourself :)

Most certainly you copied that code from somewhere and the reason the isLoading's initial state is set to true is that your whole component actually is in such state initially and then you set it to false after fetched data is ready.

user_127613690
Related