DEV Community 👩‍💻👚‍💻

DEV Community 👩‍💻👚‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for useState vs. useSuperState
Natan Farkash
Natan Farkash

Posted on

useState vs. useSuperState

useState is a great hook that allows you to manage the state of your React function component.

During the life of your component, the state needs to change according to certain conditions.

Suppose you have an prop that came outside of your component. And you want the state to change according to the value of that prop. You regularly need the help of React useEffect hook to update the state according to the value of the prop. . .

Problem: Your state will not be updated immediately, and you will need to re-render the entire component.

In recent days I have uploaded a new library called hooks-for-react. It contains my collection of hooks, for public use.

One of the main hooks in my collection is the useSuperState hook. It allows you other options to change the state alongside the setState operation.

This adds an option to change the state according to the dependency list and set the state to the value returned from the factory, just like useMemo does!

Unlike useMemo you also have access to the previous state that you can use within the factory function, to determine the end value.

It also gives you access to the current state using a ref object. That means you can use it just like you use ref.

This will give you access to the current state within other processes that take place outside the current scope of the component, such as timers etc.

check this out!

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!