React Mental Models: Working with Input | Hacker News Reader

React Mental Models: Working with Input

learnreact.design

73 pointseebeeb13 comments

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/

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

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

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

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

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

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.

Conversion. Social proof gets more people to join.

At least it helps to signal the author's motivation.

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

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.

If the code of the event handler inside the "template" bothers you, you can extract it outside:

    function App() {
        const [draft, setDraft] = React.useState("")
        const handleClick = () => setDraft("smiley")
        return (
            <div>
                <input type="text" value={draft} />
                <button onClick={handleClick}>smiley</button>
            </div>
        )
    }

It's actually what most people do.

There's no templates in React...

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

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.

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?

I treat them as templates also in my mind. Don't see anything wrong with that. In which scenario do you think it doesn't work out well?

You could also argue that any template is syntactic sugar for whatever is happening behind the hoods.

Also if you do not treat it as a template, I'm concerned you will do something very hacky, unreadable and unmaintainable.

Reply on news.ycombinator.com