What is useState() in React?

by

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 = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

and onClick:

<button onClick={setCount}>
    Click me
</button>

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.

More Related Contents:

  1. Where can I make API call with hooks in react?
  2. How to register event with useEffect hooks?
  3. How can I force a component to re-render with hooks in React?
  4. How to prevent re-rendering of components that have not changed?
  5. Do we still need functional setState way in react hooks?
  6. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  7. How can I use multiple refs for an array of elements with hooks?
  8. Invalid hook call. Hooks can only be called inside of the body of a function component
  9. Can I set state inside a useEffect hook
  10. How to call an async function inside a UseEffect() in React?
  11. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  12. Adding new data to firebase users
  13. React hooks: accessing up-to-date state from within a callback
  14. Executing async code on update of state with react-hooks
  15. Why React Hook useState uses const and not let
  16. When is it appropriate to use a constructor in REACT?
  17. How to change the value of a Context with useContext?
  18. How to setInterval for every 5 second render with React hook useEffect in React Native app?
  19. React.createClass vs. ES6 arrow function
  20. Is it an anti-pattern to define a function component inside the render() function?
  21. How target DOM with react useRef in map
  22. React Native: Using lodash debounce
  23. React Hooks Error: Hooks can only be called inside the body of a function component
  24. unable to scroll in scrollView
  25. How to clear react-native cache?
  26. Next.js context provider wrapping App component with page specific layout component giving undefined data
  27. React hooks: call component as function vs render as element
  28. React hooks useState setValue still rerender one more time when value is equal
  29. stop dragging after a limit has reached
  30. Equivalent to componentDidUpdate using React hooks

Leave a Comment