DEV Community

Discussion on: Learn Javascript Reduce method with 10 examples

Collapse
ramgendeploy profile image
Ramiro - Ramgen Author • Edited on

Those are awesome suggestions, the post was more to have examples on how to use reduce than the most performant way of doing things 😅,
as reduce is widely used on react and it's really useful to know how the vanilla javascript method works,
but yea knowing the best way of doing things is important.
I appreciate the time you have put in the comment, Thanks 😄

Collapse
fbolaji profile image
Francis.B

I rarely use Reduce in react as there more efficient methods to manipulate data as @lukeshiru mentioned.
I personal use all eas6 methods in React most of the time:
.filter()
.map()
new Set()
.find()
.findIndex()
.includes()
Object.is()
[].entries()
[].keys()
[].values()
.sort()
and untility library such as lodash
then occasionally .reduce() .some()

Thread Thread
ramgendeploy profile image
Ramiro - Ramgen Author

I also rarely use reduce in react, but I was working with the context api the other day and it really was useful to know how the reduce method worked to understand the api (at least the part where there is reduce like syntax), but yea with array manipulation reduce is at the bottom of the list 😅

Collapse
lukeshiru profile image
LUKESHIRU

Can you provide examples of the "wide use in React"? AFAIK the same applies for React: "Generally there are better solutions than reduce", similar to how generally there are better solutions than useEffect or useRef. I'm not saying you should never use reduce, I'm just saying you shouldn't default to it (using the same tool for every problem), because for the vast majority of scenarios there are better solutions.

Thread Thread
ramgendeploy profile image
Ramiro - Ramgen Author

For sure, I'm basicaly refering to the context api, it uses reduce as one of the main methods and it useful to know how .reduce works. Also if I'm not wrong useState uses useReducer at the backend but I can be mistaken, but anyways the useReducer hook can be used instead of useState when you have complex logic.

And you are right, you have to use the right tool for the right problem, I'm not arguing with that 😃
Although, I'm not sure if I'm on the same page with "generally there is a better solution than useEffect and useRef", those are really useful hooks that in the most part will do a fine job at any problem.

Thread Thread
lukeshiru profile image
LUKESHIRU

Just to be clear: useReducer is not the same thing as Array.prototype.reduce, so that comparison wouldn't be valid. And when I said:

generally there are better solutions than useEffect or useRef.

What I mean is that generally, the problem can be solved with other hooks, so both useEffect and useRef are more like "last resources", so if those are the first solutions that come to mind, you might have to do a little more thinking.

Thread Thread
ramgendeploy profile image
Ramiro - Ramgen Author

Yes you are correct, those are not the same, but useReducer, has the same idea behind so it really useful to understand array.prototype.reduce to understand things like useReducer.
Well I guess I need to do more thinking then 😅

Thread Thread
fbolaji profile image
Francis.B

I understand both of your arguments and illustrate of how .reduce() works.

Collapse
pengeszikra profile image
Peter Vivo

reducer in React means total different things, than array reduce function ... which is really useful tool as you described. reducer in React means pure function which modify state by action payload.

Thread Thread
ramgendeploy profile image
Ramiro - Ramgen Author

Yes you are correct, they are not the same, Thank for the comment.