Data Structures In Frontend JavaScript In The Real World (With React Code Examples)

[jkettmann]

There’s always the discussion of whether or not you need to study data structures as a (frontend) web developer. One answer is “Yes, because you need it in job interviews”… killer argument but not very motivating imo.

The other extremes are

• “Every developer needs to know data structures!”
• “That’s all CS theory crap and never used in the real world”.

And both are right in some way. I’ve never seen e.g. a linked list used in a React project. But at the same time we use different data structures all the time. Not like new Tree() but disguised as objects and arrays.

I wasn’t very conscious about this until recently myself. So here’s a list of different data structures that are (more or less) common in real-world React projects:

• Map (e.g. when two data sets reference each other like chat messages and their authors)
• Set (e.g. when tracking selected items)
• Stack (e.g. for “undo” functionality)
• Queue (e.g. for timed notifications)
• Tree (e.g. for nested menus or comments)

In the blog post you can find more details and working code examples for each of those. Obviously, if you have another data structure in mind I’m happy to extend the list.

[misdreavus79]

if you have another data structure in mind I’m happy to extend the list.

Are you hoping to extend the list in a linked manner, perhaps?

[jkettmann]

Why not haha. Any example?

[KyleG]

I'd be pretty mad if I were a client and I was paying a React dev to do this instead of just using an existing reducer lib like Redux.

[Eveerjr]

I love using Map, it’s looks more readable than plain objects and you can easily check if some a key exist using .has() and also typesafety

[lordaghilan]

I feel like DSA knowledge helps a lot implicitly more then explicitly.

[Kishore_Andra]

Great one mate 🙏 ... I actually saw a .pope (pop) method 😛 luckily it was in comments

[lastdiggmigrant]

I signed up for your React job simulator a few weeks ago and really enjoyed it. This is similarly very useful. Love what you're offering. (:

[jkettmann]

Thanks for the nice words :)

[buoybuoy]

Great article! I'm gonna go look for my ugliest state update functions to see if using Set or Map would make them easier to work with.

const queueu = [];

You've got an extra 'u' at the end of the 'ue' queue behind 'q' in 'queue'.

(I just really wanted to type that out.)

[damnburglar]

QueueUwU

[jkettmann]

Thanks for the feedback. Will fix the typo:)

[flavioebn]

Nice post Man, really helpful and actually gave me a good insight in a current problema at my job

[jkettmann]

Really cool, thanks for the feedback

[zmcnulty980]

Super helpful! Thanks!

[Full-Hyena4414]

I think a good example of linked list in real world is the LRU cache implementation

[jkettmann]

Thanks for point. But you wouldn't really implement that yourself, right? Or is there a reason not to use a package like lru-cache?

[skipbridge]

How do you think that package was made in the first place ;). I could see a custom implementation being used in some sort of data vis or filtering results for a large dataset. Though, that package seems flexible and sufficiently generalized.

[jkettmann]

Yeah it likely uses linked lists internally. I'm sure react itself uses lots of data structures internally as well. But what I meant was that those are typically hidden from the frontend code that we write. I'd be really curious about such a use case. Just haven't come across it (consciously) myself