What is useState in React

Question

I am currently learning hooks concept in React and trying to understand below example  import   useState   from  react    function Example            Declare a new state variable  which we ll call  quot count quot      const  count  setCount    useState 0      return        lt div gt         lt p gt You clicked  count  times lt  p gt         lt button onClick       gt  setCount count   1   gt          Click me        lt  button gt       lt  div gt          The above example increments the counter on the handler function parameter itself  What if I want to modify count value inside event handler function Consider below example  setCount        gt        how can I modify count value here  Not sure if I can use setState to modify its value     also I want to modify other state values as well here  How can I do that     lt button onClick       gt  setCount    gt    Click me  lt  button gt

User · Answer

Hooks are a new feature in React v16 7 0-alpha useState is the    Hook     useState   set the default value of the any variable and manage in function component PureComponent functions    ex   const  count  setCount    useState 0   set the default value of count 0  and u can use setCount to increment or decrement the value  onClick       gt  setCount count   1   increment the count value DOC

User · Answer

Thanks loelsonk   i did so   x000D   x000D  const  dataAction  setDataAction    useState  name      description        x000D   x000D      const  handleChangeName    data    gt    x000D          if data name  x000D              setDataAction  prevState    gt        prevState    name   data name      x000D          if data description  x000D              setDataAction  prevState    gt        prevState    description   data description      x000D         x000D       x000D          return   x000D       x000D             lt input onChange   event    gt   handleChangeName  name  event target value     gt  x000D             lt input onChange   event    gt   handleChangeName  description  event target value     gt  x000D        x000D   x000D   x000D

User · Answer

useState   is a React hook  Hooks make possible to use state and mutability inside function components   While you can t use hooks inside classes you can wrap your class component with a function one and use hooks from it  This is a great tool for migrating components from class to function form  Here is a complete example   For this example I will use a counter component  This is it    x000D   x000D  class Hello extends React Component   x000D    constructor props    x000D      super props   x000D      this state     count  props count    x000D      x000D     x000D    inc     x000D      this setState prev   gt    count  prev count 1     x000D      x000D     x000D    render     x000D      return  lt button onClick       gt  this inc    gt  this state count  lt  button gt  x000D      x000D    x000D   x000D  ReactDOM render  lt Hello count  0   gt   document getElementById  root    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D    It is a simple class component with a count state  and state update is done by methods  This is very common pattern in class components  The first thing is to wrap it with a function component with just the same name  that delegate all its properties to the wrapped component  Also you need to render the wrapped component in the function return  Here it is    x000D   x000D  function Hello props    x000D    class Hello extends React Component   x000D      constructor props    x000D        super props   x000D        this state     count  props count    x000D        x000D   x000D      inc     x000D        this setState prev   gt    count  prev count 1     x000D        x000D   x000D      render     x000D        return  lt button onClick       gt  this inc    gt  this state count  lt  button gt  x000D        x000D      x000D    return  lt Hello     props   gt  x000D    x000D   x000D  ReactDOM render  lt Hello count  0   gt   document getElementById  root    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D    This is exactly the same component  with the same behavior  same name and same properties  Now lets lift the counting state to the function component  This is how it goes    x000D   x000D  function Hello props    x000D    const  count  setCount    React useState 0   x000D    class Hello extends React Component   x000D      constructor props    x000D        super props   x000D        this state     count  props count    x000D        x000D   x000D      inc     x000D        this setState prev   gt    count  prev count 1     x000D        x000D   x000D      render     x000D        return  lt button onClick       gt  setCount count 1   gt  count  lt  button gt  x000D        x000D      x000D    return  lt Hello     props   gt  x000D    x000D   x000D  ReactDOM render  lt Hello count  0   gt   document getElementById  root    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 6 umd react production min js  integrity  sha256-3vo65ZXn5pfsCfGM5H55X SmwJHBlyNHPwRmWAPgJnM   crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 6 umd react-dom production min js  integrity  sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc   crossorigin  anonymous  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D    Note that the method inc is still there  it wont hurt anybody  in fact is dead code  This is the idea  just keep lifting state up  Once you finished you can remove the class component    x000D   x000D  function Hello props    x000D    const  count  setCount    React useState 0   x000D   x000D    return  lt button onClick       gt  setCount count 1   gt  count  lt  button gt   x000D    x000D   x000D  ReactDOM render  lt Hello count  0   gt   document getElementById  root    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 6 umd react production min js  integrity  sha256-3vo65ZXn5pfsCfGM5H55X SmwJHBlyNHPwRmWAPgJnM   crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 6 umd react-dom production min js  integrity  sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc   crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D    While this makes possible to use hooks inside class components  I would not recommend you to do so except if you migrating like I did in this example  Mixing function and class components will make state management a mess  I hope this helps  Best Regards

User · Answer

useState is a Hook that allows you to have state variables in functional components  There are two types of components in React  class and functional components  Class components are ES6 classes that extend from React Component and can have state and lifecycle methods  class Message extends React Component   constructor props    super props   this state       message                    componentDidMount                   render     return  lt div gt  this state message  lt  div gt          Functional components are functions that just accept arguments as the properties of the component and return valid JSX  function Message props      return  lt div gt  props message  lt  div gt        Or as an arrow function const Message    props    gt    lt div gt  props message  lt  div gt   As you can see  there are no state or lifecycle methods

User · Answer

useState is a hook that lets you add state to a functional component  It accepts an argument which is the initial value of the state property and returns the current value of state property and a method which is capable of updating that state property  Following is a simple example  import React   useState  from react      function HookCounter         const  count  stateCount   useState 0          return             lt div gt                lt button onClick       gt  setCount count 1   gt  count count  lt  button gt             lt  div gt                   useState accepts the initial value of the state variable which is zero in this case and returns a pair of values  The current value of the state has been called count and a method that can update the state variable has been called as setCount

User · Answer

useState   is an example built-in React hook that lets you use states in your functional components  This was not possible before React 16 7   The useState function is a built in hook that can be imported from the react package  It allows you to add state to your functional components  Using the useState hook inside a function component  you can create a piece of state without switching to class components

User · Answer

useState is one of build-in react hooks available in 0 16 7 version   useState should be used only inside functional components  useState is the way if we need an internal state and don t need to implement more complex logic such as lifecycle methods   const  state  setState    useState initialState        Returns a stateful value  and a function to update it       During the initial render  the returned state  state  is the same as   the value passed as the first argument  initialState        The setState function is used to update the state  It accepts a new   state value and enqueues a re-render of the component    Please note that useState hook callback for updating the state behaves differently than components this setState  To show you the difference I prepared two examples    x000D   x000D  class UserInfoClass extends React Component   x000D    state     firstName   John   lastName   Doe     x000D     x000D    render     x000D      return  lt div gt  x000D         lt p gt userInfo   JSON stringify this state   lt  p gt  x000D         lt button onClick       gt  this setState    x000D          firstName   Jason  x000D            gt Update name to Jason lt  button gt  x000D       lt  div gt   x000D      x000D    x000D   x000D     Please note that new object is created when setUserInfo callback is used x000D  function UserInfoFunction     x000D    const  userInfo  setUserInfo    React useState    x000D      firstName   John   lastName   Doe   x000D        x000D   x000D    return   x000D       lt div gt  x000D         lt p gt userInfo   JSON stringify userInfo   lt  p gt  x000D         lt button onClick       gt  setUserInfo   firstName   Jason      gt Update name to Jason lt  button gt  x000D       lt  div gt  x000D       x000D    x000D   x000D  ReactDOM render  x000D     lt div gt  x000D       lt UserInfoClass   gt  x000D       lt UserInfoFunction   gt  x000D     lt  div gt  x000D    document querySelector   app     x000D   lt script src  https   unpkg com react 16 7 0-alpha 0 umd react development js  gt  lt  script gt  x000D   lt script src  https   unpkg com react-dom 16 7 0-alpha 0 umd react-dom development js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D    New object is created when setUserInfo callback is used  Notice we lost lastName key value  To fixed that we could pass function inside useState   setUserInfo prevState   gt        prevState  firstName   Jason       See example    x000D   x000D     Please note that new object is created when setUserInfo callback is used x000D  function UserInfoFunction     x000D    const  userInfo  setUserInfo    React useState    x000D      firstName   John   lastName   Doe   x000D        x000D   x000D    return   x000D       lt div gt  x000D         lt p gt userInfo   JSON stringify userInfo   lt  p gt  x000D         lt button onClick       gt  setUserInfo prevState   gt     x000D             prevState  firstName   Jason       gt  x000D          Update name to Jason x000D         lt  button gt  x000D       lt  div gt  x000D       x000D    x000D   x000D  ReactDOM render  x000D       lt UserInfoFunction   gt  x000D    document querySelector   app     x000D   lt script src  https   unpkg com react 16 7 0-alpha 0 umd react development js  gt  lt  script gt  x000D   lt script src  https   unpkg com react-dom 16 7 0-alpha 0 umd react-dom development js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D       Unlike the setState method found in class components  useState does   not automatically merge update objects  You can replicate this   behavior by combining the function updater form with object spread   syntax   setState prevState   gt         Object assign would also work   return     prevState     updatedValues          For more about useState see official documentation

User · Answer

Basically React useState 0  magically sees that it should return the tuple count and setCount  a method to change count   The parameter useState takes sets the initial value of count    const  count  setCount    React useState 0     const  count2  setCount2    React useState 0         increments count by 1 when first button clicked   function handleClick        setCount count   1              increments count2 by 1 when second button clicked   function handleClick2        setCount2 count2   1           return        lt div gt         lt h2 gt A React counter made with the useState Hook  lt  h2 gt         lt p gt You clicked  count  times lt  p gt         lt p gt You clicked  count2  times lt  p gt         lt button onClick  handleClick  gt          Click me        lt  button gt          lt button onClick  handleClick2  gt          Click me2        lt  button gt        Based off Enmanuel Duran s example  but shows two counters and writes lambda functions as normal functions  so some people might understand it easier

User · Answer

React hooks are a new way  still being developed  to access the core features of react such as state without having to use classes  in your example if you want to increment a counter directly in the handler function without specifying it directly in the onClick prop  you could do something like       const  count  setCounter    useState 0   const  moreStuff  setMoreStuff    useState            const setCount        gt        setCounter count   1       setMoreStuff                    and onClick    lt button onClick  setCount  gt      Click me  lt  button gt    Let s quickly explain what is going on in this line   const  count  setCounter    useState 0     useState 0  returns a tuple where the first parameter count is the current state of the counter and setCounter is the method that will allow us to update the counter s state  We can use the setCounter method to update the state of count anywhere - In this case we are using it inside of the setCount function where we can do more things  the idea with hooks is that we are able to keep our code more functional and avoid class based components if not desired needed   I wrote a complete article about hooks with multiple examples  including counters  such as this codepen  I made use of useState  useEffect  useContext  and custom hooks  I could get into more details about how hooks work on this answer but the documentation does a very good job explaining the state hook and other hooks in detail  hope it helps   update  Hooks are not longer a proposal  since version 16 8 they re now available to be used  there is a section in React s site that answers some of the FAQ

User · Answer

useState is one of the hooks available in React v16 8 0  It basically lets you turn your otherwise non-stateful functional components to one that can have its own state   At the very basic level  it s used this way   const  isLoading  setLoading    useState true     This then lets you call setLoading passing a boolean value  It s a cool way of having  stateful  functional component

User · Answer

The answers provided above are good but let me just chip in  useState is async so if your next state is dependent on your previous state it is best you pass useState a callback  See the example below  import   useState   from  react    function Example         const  count  setCount    useState 0      return        lt div gt         lt p gt You clicked  count  times lt  p gt           passing a callback to useState to update count        lt button onClick       gt  setCount count   gt  count   1   gt          Click me        lt  button gt       lt  div gt          This is the recommended way if your new state depends on computation from the old state

User · Answer

The syntax of useState hook is straightforward   const  value  setValue    useState defaultValue   If you are not familiar with this syntax  go here   I would recommend you reading the documentation There are excellent explanations with decent amount of examples    x000D   x000D  import   useState   from  react   x000D   x000D  function Example     x000D         Declare a new state variable  which we ll call  count  x000D      const  count  setCount    useState 0   x000D     x000D       its up to you how you do it x000D    const buttonClickHandler   e   gt    x000D        increment x000D        setCount count   1  x000D      x000D        decrement x000D        setCount count -1  x000D      x000D        anything x000D        setCount 0  x000D      x000D     x000D   x000D    return   x000D          lt div gt  x000D             lt p gt You clicked  count  times lt  p gt  x000D            lt button onClick  buttonClickHandler  gt  x000D               Click me x000D            lt  button gt  x000D         lt  div gt  x000D        x000D     x000D   x000D   x000D

[javascript] What is useState() in React?

Examples related to javascript

Examples related to reactjs

Examples related to react-native

Examples related to react-hooks

Examples related to react-state