Hacker News Reader

Comment by nnoitra | Hacker News Reader

Will it make you a better React dev tho?

Author here, I actually think so. The rendering of the virtual DOM as well as hooks are fairly interesting mathematical constructs. A pattern I use a lot in web applications is the state reducer, which is really a fold over events and state. Seeing the functional nature of it (and reactive programming in general) can make for quite composable react code, while it is easy to make either a verbose mess of propdrilling or do a lot of tricky context mixing.

I'd love to see some examples of your diagrams. Are they all hand-written or do you use online tools for them? I do quite a bit of graph diagramming but not for detailed planning of implementation. Best example I've seen along those lines are the xState tools for state charts (https://stately.ai/viz).

I love xstate! I do use plantuml a lot for sketching, but most is done on paper or whiteboards and is quite transient in nature. I must have hundreds if not thousands of sketchbooks pages that look like this:

https://publish-01.obsidian.md/access/017fdca1a82df1fa88d36b...

These are great. You could probably get a lot of mileage out of a post that explores how to model a react component functionally in diagrams.

https://media.hachyderm.io/media_attachments/files/109/405/5...

This looks very mundane but I do think about it very mathematically as well: user interaction with a search engine. The "encode" arrow for example is very much about NLP and tokenizing, which is a functor from the "category" of natural language to the functor of "lucene tokens" which then has a functor to "lucene queries". This is of course the very mundane typing of functions as:

function parseQuery(query: NaturalLanguageString): LuceneQuery

nothing spectacular, but the abstract approach means I know I can cache/batch/precompute/distribute/pipeline/modularize it.

Similar mathematical concepts apply to all the other arrows, even if some are a bit wild (how does a search result influence a person's ideas?) But it means I can try to model the "wildness", and create say a probabilistic model to exercise and understand how my search engine actually performs (see for example click models and probabilistic graphical models)

I hope that makes sense?

edit: forgot picture link

I think the best way to become a better React developer is to learn Elm, and then build your React apps the same way Elm would have forced you to.

… and Redux was born!

Quite literally.

https://redux.js.org/understanding/history-and-design/prior-...

Isn't Redux only used when the app becomes too complex with really complex state?

I think so. Despite being an Elm fan I never used Redux. My side projects or work projects are small so local state and context were more than enough.

Although Redux is like Elm, the language (Typescript or ES) make immutability hard so it doesn’t feel as natural a paradigm.

Also pragmatically calling setState from an event is just easier for small projects.

Why is Elm mentioned specifically. As far as I know (state, action) => state is just a function without side effects?

Elm is a pure functional language where all data is immutable and functions are pure meaning they are guaranteed to have no side effects.

Having no side effects in JS is easy (just don't do it!) but immutability takes some effort.

React requires immutability so that if it sees the reference to an object again, it knows that it contains the same data. If it promised to work when mutating objects it would continuously need to deep search inside them to see what changed.

In JS, some array operations mutate the array, some copy it, you have to know specifically what operation you are using. In Elm, nothing mutates objects. All built in functions and functions you create will not do this.

In short - you can do (state, action) => state in any programming language, but mistakes caused by mutations are impossible in Elm by design.

Hope that makes sense.

Of course Elm is closely related to Haskell, which is a playground for category theory. I think learning the why behind it all can be useful in subtle ways.

It might be, but personally I don't know CT and I run my business on Haskell and have been writing Haskell professionally for most of my career now.

So hopefully nobody is feeling intimidated by fancy mathy stuff. Haskell is just this cool, productive programming language.

I gave an Elm talk years ago at the shared office space I used to work at. A few devs there later told me the talk helped them better understand React.

>Will it make you a better React dev tho?

Will it make you write code that is more optimal and yet harder to penetrate by others?

Yes. A React Component could be defined as a Functor with contramap function which map props with function.

const renderer = props => <h1>Hello {props.pageName}</h1>

const Title = ReactComponent(renderer).contramap(props => { pageName: props.title })

Title.fold({ title: 'Home page' }) // <h1>Hello Home page</h1>

Reply on news.ycombinator.com