What s useState?

Ivan García — Tue, 13 Jul 2021 21:12:10 +0000

well is a hook. Which in other words, is a function, which is imported from react

import { useState } from 'react'

but which is your function?

Help us to controller a state, recive a first param which is the initial state

useState(initialState)

But what a the initial state?
It is the value which initiates our state

For example:

 A object useState({}) or Array useState([]) 
 A string useState('whil')
 A number useState(5)
 A Boolean useState(true)

every time our functional component Renders. Begins with the initial state

But what a return?
Returns us two values. Which is a current state and a function for update

const [state, setState] = useState(false)

But which is our current state?

Well is our initial state which is your current state. Why?
Remember that Provide a initial state. That initial state is our current state during the first rendering

How update our current state?

Remember that useState return a function which we can update the current state

setState

the shape for update our current value is like that.

const handleState = () =>{
  setState(true)
} 
Or
JSX. 
Return(
   <button onClick={() =>setState(true)} > Click Me </button>
)

because is not called createState?

Because it wouldn't be right. Because the state Only Be create one-time when our functional component Be render for first time

setState is not function async. Just calling to enqueueState or enqueueCallback when update and your execution feels how If it were async

Because we shouldn't import react like this

Ivan García — Mon, 12 Jul 2021 20:27:45 +0000

It is very know well the shape how we import react, but however there are issues by doing this

import React from 'react' 
import * as React from 'react'

Yes well works how we want, the problem that exists with the two shape are the next's

The first imported

import React from 'react'

What happens?
is that are importing all the Library. And the problem is what we re making a importing heavy. Which can produce issues for example a low yield.

The second imported

import * as React from 'react'

What happens is that we re making same. We re Saying what all the Library Be imported how react

These complet imports, are inncesary and we re Hurting our development

So there are a way which Fix these?

Yes and is import the necessary, how in this example

 import {useState, useContext } from 'react'

But so. How Compiled our JSX?

Remember That babel exists and compile our JSX.
In the doc of react, We are told that react JSX is alone sugar for call to react create element

But We must import createElement?
No. since react use babel which Recognizes our JSX and does not need an import

DEV Community: Ivan García

What s useState?

Because we shouldn't import react like this