React Rocks

As some of you may or may not know, I freaking love React, in contrast to the likes of Angular or Vue, I just personally find that it’s a lot less opinionated. An example being how you get the argument that React isn’t a framework, sure it isn’t, but that’s one thing that makes it so good in my opinion, there’s less force with regards to architecture & standards. Of course we have standard tools such as the react-router & redux, but we’re not forced to use any of these tools, if we wanted we could quite literally do all of this in memory with bespoke JavaScript.

I for one really like functional programming & with the likes of react hooks, functional concepts have never made more sense, a prime example being currying. Let’s take the example that you have some in-memory navigation system that doesn’t use react-router for whatever unknown reason(s). In the scenario where you want to pass some function to a component, but you want to trigger it on a given event, i.e. on click, rather than using soem wrapper function, e.g.:

You could reconsider doing something like the following:

I’ll be the first to say that this may not be the best real world example, but with the project that I’m currently working on, utilising the likes of currying just makes perfect sense with React.

I also have to give React a ton of credit with regards to react hooks, for relatively simple applications react hooks just rock,100%! 🎸 – I find it’s a great way to change state within child components, obviously if you’re building a complex application then it probably make a lot more sense to use context, redux of mobx.

But going back to talking about toggling between pages, you could have some parent component i.e.:

If you wanted to alter/change/whatever with that page value, then it’s likely to be a bit of a messy solution, don’t get me wrong the source code I’ve provided is hardly high quality, but just for the sake of argument, let’s say you have to maintain this. It would be much easier if you had something like the following:

To provide a more realistic example, for the sake of argument let’s just say that you need a text field component that needs to implement the following states:

• The text field has been clicked on.
• The text field is invalid.
• The text field is currently selected.
• The input is valid.
• The input is invalid.

Let’s just say you need all of the above to provide the maximal user experience, giving the relevant feedback for each state. But to ensure that your code base follows good design principles such as single responsibility & separation of concerns, you might want to alter the CSS class based on the given states, e.g.

You may be able to then express your text field’s JSX like:

You could go on to expand this code, passing in the different state functions, i.e. you could create some service-like class where you’re passing in setIsSelected, setClicked, setEmpty, setValid based on different DOM events i.e. onClick, onChange, onFocus, etc. This kinda approach, so I’ve found allows you to keep your presentation layer, aka your JSX as simplistic as possible! 🙂

Conclusion

With subjects such as state management, of course there will never be a one fits all solution, i.e. it may be the case that using the likes of redux would be massively overkill for your application. I also find it a little crazy how some developers won’t offload state into tried & tested solutions, i.e. the URL. At least if you offload as much state as is safe & secure, you can essentially make your components work with URL’s that users can share with one another. Obviously this is a context specific subject matter & your mileage will vary, I think a big part of it is using as much common sense as possible & to ensure that you leverage more appropriate tooling as your application grows or shrinks in complexity.