
React Mental Models: Working with Input - eebeeb
https://learnreact.design/2020/03/31/react-mental-models-working-with-input
======
acemarke
I've always pointed folks to Gosha Arinich's posts on forms in React [0], as
the best resource out there, particularly the post on "controlled vs
uncontrolled inputs" [1]. (And if you really want to go in depth, he wrote a
book on the topic as well. [2])

If you're looking for libs to help abstract working with more complex forms,
Formik [3] and React Final Form [4] are probably your two best options.

[0] [https://goshakkk.name/on-forms-react/](https://goshakkk.name/on-forms-
react/)

[1] [https://goshakkk.name/controlled-vs-uncontrolled-inputs-
reac...](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/)

[2] [https://goshakkk.name/the-missing-forms-handbook-of-
react/](https://goshakkk.name/the-missing-forms-handbook-of-react/)

[3] [https://jaredpalmer.com/formik/](https://jaredpalmer.com/formik/)

[4] [https://final-form.org/react](https://final-form.org/react)

~~~
latchkey
Throwing my thin wrapper around Material-UI and Final Form into the mix. I
personally prefer RFF over Formik because of RFF's ability to control renders.

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

------
matchbok
Why does a site like this need annoying notifications in the bottom left
telling me that some random person enrolled in some random thing? Jesus, the
modern web is a mess.

~~~
JMTQp8lwXL
Conversion. Social proof gets more people to join.

------
andrewtbham
might be good if you know jquery and trying to learn react.

~~~
wolco
I know JQuery, love Vue and liked angularjs when it came out. I've played with
react application using local state/drilling down only. I found this to be the
best tuturial for me introducing setState.. after reading this I'm starting to
understand/accept putting the event code directly in the template rather than
it belongs somewhere else.

~~~
pavlov
There's no templates in React...

~~~
nicoburns
Blocks of JSX are basically templates, even if they're not string-based like
in frameworks.

~~~
rejschaap
Speaking of mental models, "basically templates" is the wrong mental model for
JSX. JSX is syntactic sugar for the React.createElement() function. Writing
some components using this function directly will lead to a much better
understanding than treating it as templating.

~~~
nicoburns
I'd argue that not only is JSX "like templates", it actually is a template. I
know what the syntax sugar compiles down to, and I'm very appreciative of the
benefits over traditional string-based templates. But for me the fundamental
property of template is an easy way to interpolate data into a rendering
structure, and JSX definitely is that. Perhaps you have a more restrictive
idea of what constitutes a template?

