Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Things I wish I knew about state management when I started writing React apps

medium.com

Post reply on HN
Print view View original

11–20 of 335 posts

Re: Things I wish I knew about state management when I started writing React apps

#11

Post by dkarl »

nubb wrote: post #3

I’ve been learning React and have been avoiding Redux out of fear of complexity. However, as my app grows more complex, the need for a global state manager becomes more apparent. Time to start learning Redux today :)

>I’ve been learning React and have been avoiding Redux out of fear of complexity.

Redux seems to be very polarizing about whether it increases or reduces complexity. As a back-end weenie who finds virtually everything about the front end confusing, I found Redux to be a breath of fresh air. Finally something straightforward that made sense and where the complexity of the code never seemed to exceed the complexity of the problem it was solving. But I was working with people who could run rings around me in the big React codebase we were working on who said Redux was a total mindfuck for them and they would never use it again if they had a choice.

Re: Things I wish I knew about state management when I started writing React apps

#12

Post by couchand »

vga805 wrote: post #8

What's the deal with the recommendation to use some library for managing forms? I've been working with React almost since its initial release and I've built some pretty complex forms... yet form libraries remain the one thing I've never really seen a need for. At the very least, using something like formik shouldn't be a necessity. There should be some qualifier that it's only really needed for very complex forms. Or…

I've spent a lot more time fighting with formik than I've ever spent just working with inputs directly in React.

Re: Things I wish I knew about state management when I started writing React apps

#13

Post by latchkey »

vga805 wrote: post #8

What's the deal with the recommendation to use some library for managing forms? I've been working with React almost since its initial release and I've built some pretty complex forms... yet form libraries remain the one thing I've never really seen a need for. At the very least, using something like formik shouldn't be a necessity. There should be some qualifier that it's only really needed for very complex forms. Or…

You certainly do not need to use a form library, but it does make it easier to deal with complicated issues such as render counts. I built a thin wrapper around material-ui and react final form (what I would suggest over formik) [1] and a little demo [2] that visually demonstrates this.

[1] https://github.com/lookfirst/mui-rff

[2] https://lookfirst.github.io/mui-rff/

Re: Things I wish I knew about state management when I started writing React apps

#14

Post by breytex »

vga805 wrote: post #8

What's the deal with the recommendation to use some library for managing forms? I've been working with React almost since its initial release and I've built some pretty complex forms... yet form libraries remain the one thing I've never really seen a need for. At the very least, using something like formik shouldn't be a necessity. There should be some qualifier that it's only really needed for very complex forms. Or…

I felt exactly the same for many years, but when hooks where introduced, I discovered react-hook-form[1].

It just blew my mind how you can write complex forms with validations in just a few lines of code.

Give it a try.

[1] https://github.com/react-hook-form/react-hook-form

Re: Things I wish I knew about state management when I started writing React apps

#15

Post by gorpomon »

vga805 wrote: post #8

What's the deal with the recommendation to use some library for managing forms? I've been working with React almost since its initial release and I've built some pretty complex forms... yet form libraries remain the one thing I've never really seen a need for. At the very least, using something like formik shouldn't be a necessity. There should be some qualifier that it's only really needed for very complex forms. Or…

I use redux-form and really enjoy it. A modern form UI has a lot of considerations that classic html/css forms do not:

* The concept of pristine/untouched inputs

* Basic and custom validations

* Resetting forms to various states

* Prepopulating data based on an API response

* Dynamically creating inputs based on UI states.

* Normalizing data upon input or submit

* Creating wizard/multi-step forms

All those implemented in Vanilla JS or in a React component can get messy. Is redux-form or any form library absolutely necessary, nope, but they sure do help.

Re: Things I wish I knew about state management when I started writing React apps

#16

Post by acemarke »

nubb wrote: post #3

I’ve been learning React and have been avoiding Redux out of fear of complexity. However, as my app grows more complex, the need for a global state manager becomes more apparent. Time to start learning Redux today :)

Hi, I'm a Redux maintainer.

You may be interested in my suggested resources for learning React and Redux:

https://blog.isquaredsoftware.com/2017/12/blogged-answers-le...

https://blog.isquaredsoftware.com/2017/12/blogged-answers-le...

https://github.com/markerikson/react-redux-links

Also, please check out our new official Redux Toolkit package. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once. It's our recommended way to write Redux logic:

https://redux-toolkit.js.org

Meanwhile, we're working on a major rewrite of the Redux core docs. I'm hoping to put together a new "Quick Start" tutorial page that will show how to use Redux Toolkit and React-Redux in a "top-down" approach as a fast way to get productive. The current tutorials take a "bottom-up" approach, teaching how Redux works from first principles. I also want to rewrite those, keeping the same teaching flow, but updating the content to be easier to understand and to teach patterns that result in simpler code.

Re: Things I wish I knew about state management when I started writing React apps

#17

Post by brlewis »

Point 1 in this article is totally misguided. "State management is how you mitigate prop drilling" implies that when prop drilling is not a problem (i.e. most of the time), that you don't need to think about state management. Even if you're prop drilling, you need to make sure data is not stored/updated in multiple places in your app in order to keep the UI consistent.

The one redeeming part of that section of this article is that it links to another article that isn't as wrong. The linked article details when prop drilling is and isn't a problem. And most of the problems it describes can be reduced by using TypeScript. https://kentcdodds.com/blog/prop-drilling

Re: Things I wish I knew about state management when I started writing React apps

#18

Post by the_optimist »

See also: Reagent. State is a first-class construct in Clojure/script, and forms associated with statefulness and state management are directly available. From that perspective, none of the front-ends presented appear complex.

https://github.com/reagent-project/reagent

Re: Things I wish I knew about state management when I started writing React apps

#19

Post by shakopeeant »

leetrout wrote: post #4
nubb wrote: post #3

I’ve been learning React and have been avoiding Redux out of fear of complexity. However, as my app grows more complex, the need for a global state manager becomes more apparent. Time to start learning Redux today :)

Or mobx :)

gross

Re: Things I wish I knew about state management when I started writing React apps

#20

Post by breytex »

mondaygreens wrote: post #6
nubb wrote: post #3

I’ve been learning React and have been avoiding Redux out of fear of complexity. However, as my app grows more complex, the need for a global state manager becomes more apparent. Time to start learning Redux today :)

Try zustand!

https://github.com/react-spring/zustand
Post reply on HN