How can React components listen to websocket updates?

Sent on May 11th, 2021

Few days back, I work on setting up a websocket client for a frontend React project at work. There was a lot of thought process involved.

• Do we store the socket instance in state?
• Or a ref because we wont have to update it.
• What if I have multiple components that want to use the socket? Maybe I store near the root and pass the socket via props to the components that need it.
• A lot of passing props. Should I use context now?

I ended up with creating a custom hook that lets components listen to websocket events when they mount. I wrote what I learned, along with some code, in this new post.

Website update

Worked on the header and the footer for the website. Nothing crazy happening there other than Tailwind's new update which introduces CSS filters like background blur. The header has a blur when is on top of content.

Here is the Tailwind update if you'd like to have a look at the complete update - https://blog.tailwindcss.com/tailwindcss-2-1

That's all for this Tuesday. If you are enjoying these letters, can you please reply to this with some nice kind words? 😬 I can put them up on the website for some social proof.

A vase which I spray painted

See you in a week.