I am new with react js.
I made two components to send/receive data using props between them.
But it gets more complex, I feel like I need to replace them with other solution like redux. I wonder there is the latest better solution to replace redux now for communication between two react components.
There was a lot of opinions between redux and context api like this post. But today, I can say yes, you can replace redux with just react itself. Because, currently react provides so much concepts just like the redux, context api. You can find react additional hooks like useReducer, useCallback, useMemo, etc.
But arguably, redux is still worth for maintaining project easily. You can have redux devtool, keep the code clean (state in store - a separate place for concerns).
There are more concerns over this. You may see this issue what future react will have. You may also find the medium blog helpful and the reddit discussion.
Worth Reading:
State management with react hooks and context api
Redux main task is to be a 'predictable state container', and, as you wrote, it also makes sharing data between components much easier. The main drawback is that it requires additional code, but I think that it is worth it.
For apps / websites that are not very small, I wouldn't use react / react native without it.
The way redux works may be a bit difficult to understand in the beginning. The following is a great article that helped me when I started using it: redux connect explained
Related
I started learning React recently and managed to build a simple application. The app works well, but I ended up passing too many props to child components, which makes the code very messy. I was looking for ways to improve my code and found out that there are different ways to handle the state of my application. Most of my research pointed to either Redux or the useContext hook.
Besides making my code cleaner, does Redux or useContext help improve the performance of my application? Or are they actually worse than passing props when it comes to performance?
Thanks in advance!
Redux in itself isn't really slowing your App down if you do it right. What may cause your app to slow down is too many re-renders. Here is an article on how to prevent that : https://redux.js.org/faq/performance#wont-calling-all-my-reducers-for-each-action-be-slow
You can also read about performance in the offical Redux documentation: https://redux.js.org/faq/performance#wont-calling-all-my-reducers-for-each-action-be-slow
and this: https://redux.js.org/faq/general#:~:text=Redux%20is%20most%20useful%20when%20in%20cases%20when%3A&text=The%20app%20state%20is%20updated,is%20being%20updated%20over%20time
A slight downside to redux and useContext, is that you have to wait for the redux store to be available on the initial render, so you have to check if the state is available before using it. (state && console.log(state). However, this is still better than passing around a million props.
I have learned about how to use Redux as the state management library, but most of my project is using react useContext + useReducer since it's not a huge project.
And as far as I know, the Redux is similar to react useReducer which is only managing the state. But I want to create a dedicated file where I can put all the functions as useContext does.
Is it possible to use useContext + Redux? or is there any better solution for it?
Thanks in advance, appreciate any kinda response.
Neither useContext nor Redux tell you anything about how to structure your files. Theoretically you could put everything into one file or split it up into hundreds.
There are recommended project structures though.
Take a look at the Style Guide, which gives an example of a recommended file/folder structure.
Also, stay away from most external tutorials that still show switch..case reducers, connect or folder structures with separate action, reducer and constant files. Those are heavily outdated. Follow the official tutorial instead:
https://redux.js.org/tutorials/essentials/part-1-overview-concepts
I'm an angular developer for many years and I tried to switch some of my new projects by using React & React Native, but I had an hard time deciding which state management could suit better for a project that could grow bigger, and my question was if I could use both solutions by having Redux as a central storage and the Context API for a better management to pass props to nested components, is it a good pattern to use both or should I stick to one of them.
It really depends on the use case.
If you're looking for top-down props pass down structure where the same data is used over multiple depths of components (such as Theme, Auth, etc.), Context API is the way.
If you're looking for a big store where you can dynamically manage data and constantly update it, Redux is the way.
If you need both, my opinion is that it's perfectly okay to do so.
They're not very heavy, (I guess a Redux.. a lil bit?) and they do have different purposes anyway.
Now that React finally has hooks, will this eventually be the new standard for creating components or will the need to create class components still exist?
I understand that at the moment hooks can not accomplish everything a class can. Such as, providing hooks to lifecycle methods for getSnapshotBeforeUpdate and componentDidCatch. However, the React team has said they plan on adding this functionality soon. They also mention that there are no plans to remove classes from React.
So when all lifecycle methods are supported is there any reason to create class components? Do classes still handle certain situations better than a functional component at this point?
I'm going to politely disagree with the comments above. Hooks are 100% the future of React. I'd highly recommend reading the Medium article that Dan Abramov wrote in October 2018. There is also a video at the top of the article of Dan Abramov delivering the keynote address at the last React Conf. In his address he introduces hooks for the first time. He adds towards the end of address that he does not recommend refactoring your old components immediately, but he does recommend using hooks moving forward (and this is when hooks were still an alpha release):
I ask you not to rewrite your whole apps in hooks...because personally I find that it takes a bit of a mind shift to start thinking in hooks, and it might be a bit confusing if you just try to take a class Component and convert it, but I do encourage you to try using hooks in some of the newer code that you're writing and let us know what you think.
He follows that with:
So, in our view hooks represent our vision of the future of React. But, they also represent the way we move React forward, and that is that we don't do big re-writes. And, that is that we want the new patterns that we like better to co-exist with the old patterns.
He discusses this in greater detail if you watch the whole thing. I believe the take away from this is that Facebook and Dan Abramov see hooks as the future of React (so do I, but my opinion doesn't matter). They see the patterns that emerge from hooks as significantly better than the patterns established by class Components. They also indicate that the reason they intend to maintain class Components is because they don't intend to re-write React or introduce breaking changes.
There is also less code bloat due to the use of stateful functions as opposed to extending classes. Hooks hook directly into the global application state maintained by the React framework, as opposed to maintaining it locally through an abstraction (which is why they're called hooks). Hooks promote code re-usability through custom hooks. Hooks allow us to monitor individual state without lifecycle methods and conditionals through useEffect. There are plenty of other benefits to using hooks over class Components, but I don't want to write a book here.
In addition to the benefits listed, and the praise from the Facebook team, I'd point to all of the third-party libraries that are adding support for hooks. The FAQ page you shared indicates that both Redux and React Router are planning on releasing support for hooks. In fact, the Redux maintainers have been excitedly discussing hooks since they were introduced to the public. And, Ryan Florence (the creator of React Router) spoke after Dan Abrimov at React Conf. He actually gave a greater endorsement for hooks:
Dan just said "don't re-write your apps in hooks". I think you should.
In addition to those, Material-UI version 4-alpha is out, and they have introduced hooks as well.
In summary, hooks are the future of React, and we should be using them. They are in stable release since React v16.8.0, and there is no reason not to predominantly use them moving forward.
I have been playing with ReactiveX for a bit and really like the approach. I have also been following Relay and Falcor for a while and understand the advantages of declarative data fetching.
I have seen people integrating react, redux with falcor, but have not seen any attempts to integrate React, Rxjs with either Relay or Falcor.
So I wanted to write a simple todo example, but before that wanted to ask whether it is a sound combination at all. Are there compatible and whether some advantages of one approach will negatively affect advantages of others.
Also if anyone can share some resources on this topic please do :)
There are several libraries that I found:
https://github.com/trxcllnt/reaxtor no React js though
https://github.com/FourSS/refar
UPDATE: there is an attempt by meteor developers to create their own version of relay using reactive graphql see Apollo Project They use observables for watch queries
Also there is a good library called relate which you can integrate with rxjs redux style state machine