javascript - Why the initial loading state is set to true while using useState? - Stack Overflow

admin管理员组

文章数量:1386514

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?

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?

• javascript
• reactjs
• react-hooks
• use-effect
• use-state

Share Improve this question Follow asked Jul 15, 2020 at 17:13 user13618351user13618351

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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)

  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/docs/handling-events.html

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 ponent actually is in such state initially and then you set it to false after fetched data is ready.

本文标签： javascriptWhy the initial loading state is set to true while using useStateStack Overflow