Pourquoi l'état de chargement initial est mis à true en utilisant useState ?

Question

Je ne comprends pas pourquoi le isLoading est réglé sur vrai dans l'état initial. N'est-ce pas censé être faux au départ ? Prenons cet exemple simple :

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

Une autre chose est que, si on le met à true o false initialement dans le code ci-dessus, le useEffect fonctionne toujours de la même manière et le résultat à l'écran sera également le même. Alors, pourquoi true ? S'agit-il d'une sorte de norme ?

Answer 1

La valeur que vous transmettez lors de l'initialisation de l'état dépend de vous.

Si vous voulez qu'il soit initialisé comme vrai, vous passez true comme ceci.

const [isLoading, setIsLoading] = useState(true)

Si vous voulez, vous pouvez aussi passer false et il sera initialisé comme false.

const [isLoading, setIsLoading] = useState(false)

Answer 2

  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

Plus d'informations : https://reactjs.org/docs/handling-events.html

Answer 3

Vous demandez la raison pour laquelle vous avez défini vous-même cette valeur initiale :)

Vous avez très certainement copié ce code de quelque part et la raison pour laquelle la isLoading L'état initial de l'entreprise est fixé à true c'est que l'ensemble de votre composant est dans cet état initialement et que vous le mettez à faux une fois que les données récupérées sont prêtes.