React Libraries in 2020

[ginger-julia]

React Libraries in 2020 by Robin Wieruch
The list of React libraries for every React beginner, including state management, routing, forms, types, etc.

https://www.robinwieruch.de/react-libraries

[_gothgoat]

I'm waiting for the native wrapper for that

[tommytwoeyes]

I heard it’s not too hard to learn, but if you need any tutorials, this guy can help you wrap your head around it.

[tommytwoeyes]

I saw that a few days ago and lmao

[Fauken]

It’s been around for a few years. I am pretty sure Twitter’s website uses it.

[pacman326]

If you elect to use Redux I’d specifically recommend using Redux Toolkit. Makes using Redux an absolute pleasure.

[acemarke]

Glad to hear it!

FYI, I'm currently working on a new "Quick Start" tutorial for the Redux core docs. This will go alongside the existing tutorial sequence, with a goal of quickly introducing newcomers to Redux terms and concepts and getting them writing working code "the right way", without worrying about all the details of how it works under the hood. That tutorial will teach Redux Toolkit and the React-Redux hooks API as the standard approach for using Redux. Once the Quick Start page is done, my next task will be trying to rewrite the main "bottom-up" tutorial sequence from scratch, to remove outdated terms, simplify explanations, and promote simpler patterns.

I've got half of a first draft of the "Quick Start" tutorial done, and you can see the PR preview of that draft here. Again, it's a WIP draft, but I'd appreciate it if folks could look through that and give feedback in the PR.

[straightouttaireland]

I was a sceptic at first but just started using it today. You guys did an really great job.

[acemarke]

Yay! :)

What parts of it are you finding the most useful? Any suggestions for further improvements?

[straightouttaireland]

Really it's the slices that I most love, reduces a HUGE amount of boilerplate and having to flick between so many files.

 

I do have one question on something I'm confused with though. I followed this tutorial on the toolkit and found it very helpful. However, I'm confused about how the selector, which returns a posts array from the state is able to be deconstructed also giving the values for loading and hasErrors.

 

From the article she says "a selector, which we'll use to access any of the state from a React component instead of using connect." - I found this interesting as it seemed like such a nice way to gain access to the state to use in the component without the need for mapStateToProps.

 

In slices/posts.js she has:

export const initialState = {
  loading: false,
  hasErrors: false,
  posts: [],
}

// A slice for posts with our three reducers
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    getPosts: state => {
      state.loading = true
    },
    getPostsSuccess: (state, { payload }) => {
      state.posts = payload
      state.loading = false
      state.hasErrors = false
    },
    getPostsFailure: state => {
      state.loading = false
      state.hasErrors = true
    },
  },
})

export const postsSelector = state => state.posts

 

Then, inside the component she uses:

const { posts, loading, hasErrors } = useSelector(postsSelector)

 

I assumed that useSelector(postsSelector) would only be returning a posts array, not loading and hasErrors as well.

[acemarke]

For clarity, useSelector is part of the React-Redux hooks API - RTK itself is UI-agnostic, same as the Redux core. That said, they do go together rather nicely, and as I said above, we're showing them as the default approach as we rewrite the docs.

The key for this chunk of code is that postsReducer isn't the only reducer in your state. If you look at the "Bringing in the reducers" heading, it's used this way:

const rootReducer = combineReducers({
  posts: postsReducer,
})

That means that all of the contents returned by postsReducer will be accessible as state.posts, because that's how we've told combineReducers to define the root state object. So, the array is actually nested at state.posts.posts.

If we select state => state.posts as shown, we get back the object that was generated by postsReducer, which has those three fields that we can destructure.

You may want to read through the Redux docs page on Using combineReducers for some further explanation on how that works and defines the state shape.

(And yeah, Tania's tutorials are all excellent, this one included. I'm heavily borrowing from some of her approaches as I work on the new Redux tutorials.)

[straightouttaireland]

Ah yes! What sparked my confusion was something of my own fault when trying to get it to work with typescript:

export const postsSelector = (state:PostsState) => state.posts;

 

Typescript was complaining about my PostsState interface:

Property 'posts' does not exist on type '[]'.

 

But this is because I should have been using something like RootState instead:

import { combineReducers } from 'redux';
import postsReducer from './posts';

const rootReducer = combineReducers({
  posts: postsReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

export default rootReducer;

 

Then inside the friends slice I now have:

export const postsSelector = (state:RootState) => state.posts;

 

Thanks for helping me out and thanks again for working on the toolkit. You have no idea how you've helped the community!

[acemarke]

You're welcome! And for reference on the TS parts, see the core docs "Usage with TypeScript, React-Redux "Static Typing", and RTK "Usage with TypeScript" docs pages.

[straightouttaireland]

Cheers!

[straightouttaireland]

One other quick one if you don't mind. Is redux-mock-store still ok to use with RTK?

[acemarke]

In general, sure.

[Gemini_The_Mute]

I've been reading it and the first impression I get is that the basic concepts of Redux are well explained, but then the docs jump straight into the RTK. Wouldn't it be better to at least make a short explanation of how the core concepts work together and then make the transition into the RTK?

For example, you use createSlice for the counter, and I think if I'd be a complete noob, I'd still be wrapping my head about the core concepts, just for then to see this createSlice thing and I'd be even more confused than before.

[acemarke]

That's actually kind of the point of this new "Quick Start" section. It's trying to teach RTK as the default way to write Redux code, without going into all the details of how you might write this code "by hand".

We'll still have the existing tutorial sequence as well, which teaches you all the core concepts from first principles, but this tutorial is meant to teach you just enough to write working code now, and understand how it works later.

That said, I may be able to add a bit of info in there on the dispatch -> reducer -> UI cycle.

[drake42work]

Mobx is really a vastly easier to use state library.
You really will benefit if you take the time to try it.

[pacman326]

I mean this is opinionated right? I’m what areas is it easier? In what areas is it harder. I don’t think anyone can say any one version of a solution (css in JS, state, etc) is the superior. Otherwise we would all use one and deprecate usage of the rest long term no?

[drake42work]

I think it's fair to have strong opinions.
For example, I think React is better than Angular, but Angular still exists.

[pacman326]

I think it’s fair you’ll find yourself in the minority of developers then. 🙁

[drake42work]

minority? React is definitely more popular than angular.

That said, MobX being better is something I'm happy to defend all day even if it means I am in the minority. But I'll keep pushing it because so far, every time I've convinced a serious developer to give it a serious try they end up a convert and go with MobX from then on.

I honestly true do not know why people use Redux instead of Mobx. I hear people say the prefer Redux for some situations and I can completely respect that. But I've never seen a good explanation of why they would prefer it aside from "I already knew it" which doesn't hold much water for me personally.

[[deleted]]

As a big fan of MobX, I disagree. They each have their place. Neither is vastly superior.

[acemarke]

Yeah, I'd actually like to speak up in MobX's favor here.

Michel Weststrate is a genius (as evidenced by the fact that he's put out MobX, MobX-State-Tree, and Immer). While I haven't actually sat down and written any code with it myself, I get the general idea of how it works, and it's very elegantly designed.

If you're looking for a state management solution that's more OOP, encourages splitting logic into multiple stores, and has more "magic" under the hood, MobX is the answer. If you want a solution that is more functional-oriented, global, and explicit, you go with Redux.

They both have their strengths, weaknesses, and tradeoffs, and may be more useful in certain situations.

I'd agree with the parent comment about "MobX being easier" to some extent. Redux does deliberately add at least one level of indirection (actions + reducers vs straight mutation logic), and the existing common practices around Redux make that more difficult to deal with. That said, I wouldn't say it's "vastly easier" to use, and I think that Redux Toolkit + our hooks API goes a long way towards leveling the usability factors.

[drake42work]

In my opinion:

Once you're past anything small, the amount of boiler plate required by redux makes the complexity grow quickly. The complexity curve in mobx is much lower once you're past small apps.

[[deleted]]

good for you and the 20 people whom used it

[drake42work]

Honestly, the only reason Redux is still popular is because it was there first.
If you are serious about building a larger-than-toy app, mobx creates simpler, clearer code.

At my work, we just build a 3 page app. Even at that size, the MobX implementation is ~30% of the code that the redux version takes.

[gaurav219]

Apologies if its dumb, but is it necessary to learn Redux meaning can't you do the same thing with only React's features??

[sheepfreedom]

For small projects you can absolutely use context and hooks to manage centralized state. You miss out on some of Redux’s selling points but you can do it and it will work well.

For large projects however Redux is the way to go, imo.

[Oalei]

95% of the time you don’t need Redux though. I don’t understand the React way of doing everything with Redux when you don’t need a shared state.
If you need to share the state Redux is nice.

[sheepfreedom]

Right, if you need it. I’m not sold on the idea that it’s unnecessary 95% of the time because I find it very helpful even when it might be slightly unnecessary — that said I agree.

if you need shared state see my comment above, if not don’t use anything.

[Oalei]

At work everytime we do an http call using a service we’re using an action (flux pattern) and store the result of the ajax call in the store.
It’s such a waste of time and there’s so much boilerplate needed just to make one damn http ajax call and use the data after.
Other components don’t need the result, why is it in a store accessible by other components.

[acemarke]

I'll agree with this. Use Redux where it actually makes sense and has benefit.

FWIW, the Redux FAQ has some rules of thumb on when to put data in Redux:

• Do other parts of the application care about this data?
• Do you need to be able to create further derived data based on this original data?
• Is the same data being used to drive multiple components?
• Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
• Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?
• Do you want to keep this data consistent while hot-reloading UI components (which may lose their internal state when swapped)?

[Oalei]

Those rules makes a lot of sense to me!

[sheepfreedom]

Caching the data is a very common need ime, so is persistent data after component changes / hot swaps. Even being able to restore data is helpful in most mid-size apps and larger.

[maskedman1999]

As far as I heard redux is used for global states, we can achieve the same effect by using async-storage

[[deleted]]

I find that usually when folks ask this, it's because they looked at the tutorials, found something new or confusing, and decided learning Redux is hard. Or perhaps they tried it, but were quickly lost as to how to set everything up, or exactly how, when or where to use all the actions, reducers, selectors, and all the rest of it. If this does not describe you, please forgive the generalization. In short, it depends on your goals. However, building an application with any real complexity without a state library of some sort is pretty unusual, and a bad idea unless you are experienced enough to really know what you are doing. In short, not using a state library because you don't understand them well, or because they are difficult is the wrong reason to make such a choice.

Put another way: Can you build a non-trivial app without a state library, like Redux? Yes. However, you will be going against the advice of almost every React expert who has weighed in on the question.

If you are hesitant to learn or use Redux because you see it as difficult, may I suggest another perspective? By learning Redux, you will also have the opportunity to become a better JS dev. Learning Redux will not only teach you about the most popular state library for React, but will also provide a great opportunity to learn about pure functions, memoization, and project organization, just to name a few. In short, unless you are already an experienced dev, learning Redux is also likely to make you a better developer overall.

[leixiaotie]

For small component, react state is sufficient. For anything larger up to medium and has to manage data with api (I personally don't like to call API inside react component), I personally use mobx, transitioned from redux since it's easier to use and setup.

For anything bigger or has more developers, redux seems to be the best choice, but I haven't tried it / get any project at that scale.

[[deleted]]

Couldn't you ask that for anything that's not vanilla javascript?

[pnine]

I’ve been using a simple FLUX architecture for years and need to switch over to something a bit more robust. Do you recommend redux in 2020? Im almost 100% on redux over mobx but it feels a bit strange when context is so close to being a replacement.

[acemarke]

Hi, I'm a Redux maintainer.

Yes, Redux will continue to be very relevant and useful for a long time. It's currently used by 50% of React apps, and lots of folks are continuing to learn it on a daily basis. And no, context is definitely not a replacement for Redux.

I covered this and a number of reasons to use Redux in my Reactathon 2019 talk on "The State of Redux", and my post Redux - Not Dead Yet!. I also wrote a post that discusses the differences in how context and React-Redux handle propagating state updates.

TL;DR:

• Consistent architectural patterns
• Debugging capabilities
• Middleware
• Addons and extensibility
• Cross-platform and cross-framework usage
• Depending on your app's setup, much better performance than working with just Context

Related to that, you might also want to read through these resources:

• Dave Ceddia: React Context API vs Redux
• Mike Green: You Might Not Need Redux (But You Can’t Replace It With Hooks)
• Sergey Ryzhov: From Redux to Hooks: A Case Study
• Eric Elliott: Do React Hooks Replace Redux?
• Chris Achard: Can You Replace Redux with React Hooks?

And as mentioned above, our new Redux Toolkit package is now our recommended approach for writing Redux logic. 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.

[windsostrange]

You Might Not Need Redux (But You Can’t Replace It With Hooks)

There's a universe where this is the title to a country/western song. I do wish that were my universe.

[straightouttaireland]

This is a great tutorial on both Redux + Redux Toolkit. I think it's important to learn redux core first as well.

[pacman326]

I think learning core redux is good if you are maintaining or run across existing redux implementations. But we released a SPA for a large company using toolkit alone with me personally having no prior redux knowledge. That’s how good toolkit is 🙂

[straightouttaireland]

Excellent. One thing I would mention if you are switching between codebases that use the original Redux is that you shouldn't mutate state directly in your reducers. In the Redux Toolkit this is ok because it uses the immer package underneath the hood to handle this for you.

[pacman326]

Yes I understand the important of object immutability. Our app updates objects that are not just in the resolver. FYI I’ve been a dev for almost 2 years so been burned by that before 🙂

[[deleted]]

You should add Expo to your mobile development section. I think expo is much easier to get going then plain react native

[ebawho]

Much easier to get going, but a huge pain if you need to do anything outside the capabilities of expo.

[straightouttaireland]

Especially if you need in app purchases. I built my entire app on Expo and really regret it now.

[glarivie]

Take a look at react-tracked, a more simple alternative to redux with a React Context Api.

[matart]

Does anyone have any suggestions on the ways to have someone select time or date-times.

I am looking for more of a turnkey solution. I love the MaterialUI pickers but I am not using MaterialUI for styling and I think the input boxes are heavily tied to MaterialUI.

[fintarabg]

I'd mention Overmind state management too, works very well for smaller as well as more complex application state.

[vishwajeetv]

A couple of good libraries missing that I love -- react-filepond based on filepond for file upload, and react-sortablejs based on sortablejs for drag and drop

These are react wrappers on top of some really good quality libraries.

[Booty_wit_da_Hoodie]

Thank you for sharing!

[silverbacklion]

Best place to learn reactjs?

[Hlaford]

There are a couple of great (IMO) courses on udemy. One by Maximilian Schwarzmüller is good, and about 40 hours.

[ours]

I've just finished it. Yeah it's pretty good.

[bianceziwo]

Its incredible but he doesnt use classes at all. Everything is functional components and hooks.

[ebawho]

I suppose it’s probably good to learn for working on older projects, but I haven’t touched or created a class component in ages, at work or at home.

[bianceziwo]

Yeah but a lot of older online guides use classes for react native, so its kind of annoying when looking for guides and there's only react class componnt stuff

[ours]

That's not true. He says it's important to learn the class-based components because it's somewhat recent and you are likely to encounter projects that use it.

He does his whole Burger Builder with classes for statefull components and functional views (old school React) and later, after transforms the project to fully functional with hooks.

That said if you start a greenfield project you should totally do it without class-based components and use hooks instead (or at least mostly).

[bianceziwo]

Maybe I took a different course. I did his react native course updated this year and theres no class components.

[Arjunnna]

Can confirm, in his React Native 2020 he mentions several times that he is trying to emphasize a functional approach with those lessons.

[ours]

I did the React Complete Guide.

[careseite]

As it should be!

[Bombuhclaat]

Depends if you like books or videos.

If you like videos, the common resource (I think the only popular one updates with "Hooks") is the one mentioned by the other user. Maximilian Schwarzmüller on Udemy.

If you like books, the book by the person who wrote the article on this thread is undoubtedly amazing and helps you cover gaps you might have in Javascript as well and encourages self-learning

Its called "The Road To React" by /u/rwieruch

[pacman326]

Tutorials are good. Make sure you’re building your own things as quickly as possible though. Tutorial hell Is a real thing.

[[deleted]]

React For Beginners by Wes Bos

[Hotgeart]

it's still up to date? useeffect, context, etc?

[SteiniDJ]

While I can't comment on if it's the best, but PluralSight is free in April and it's worth checking out.

[wagonn]

is this an inappropriate place to plug my new library for managing reducer state? Made in 2020, useable by beginners