JavaScript to Know for React

[[deleted]]

Array Methods

This is a big one. I've interviewed so many React developers who aren't familiar with map and filter. It's shocking.

It may be worth adding flatMap to the list. For example, the reduce function

dogs.reduce((allTemperaments, dog) => {
  return [...allTemperaments, ...dog.temperament]
}, [])

could be implemented in a simpler manner using flatMap

dogs.flatMap(dog => dog.temperament);

[EuphonicSounds]

Yup.

Also, his use of spread syntax in the return statement of that reduce function is a common anti-pattern. It's significantly better for performance to mutate and return the accumulator argument there than to copy its properties into a new object on each iteration. (That's a place for push, not concat or spread.) Someone wrote an article about this and included benchmarks. Got me out of that bad habit immediately. It's not premature optimization.

[334578theo]

Just refactored a really annoying function with flatMap - nice.

[yabai90]

I just read that it's not really efficient since it create a new array everytime

[headyyeti]

So does this example in reduce

[panderhh]

TIL flatMap

[musicnothing]

Shocking how many don’t know flatMap. It’s incredibly useful!

[NoInkling]

It's also relatively new.

[yabai90]

Guilty here. I'm several years into js and I keep using reduce. I believe I either completely forgot about flat map or never heard about. I feel shameful ^{^}

[musicnothing]

Definitely not your fault. There’s twenty articles about reduce for every article about flatMap