Making sense of React’s useEffect

Today Dan Abramov published an extensive deep dive into useEffect. The issue that many devs (who, including me, have been using componentDidMount before) are having, is that they now need to unlearn a few things

It’s only after I stopped looking at the useEffect Hook through the prism of the familiar class lifecycle methods that everything came together for me.

This reply-tweet made resonated quite well:

The read is really extensive (40+ minutes), but totally worth your time.

~

A few days ago, Adam Rackis has posted a nice example on his blog in which he (re)wrote a component that contains a websocket. As the websocket connection would always be reinitialised with every render, he combined useEffect with useReducer

While we could add every piece of needed state to our useEffect dependency list, this would cause the web socket to be torn down, and re-created on every update.

If we look closer, however, we might notice something interesting. Every operation we’re performing is always in terms of prior state. […] This is precisely where a reducer shines; in fact, sending commands that project prior state to a new state is the whole purpose of a reducer.

const BookEntryList = props => {
  const [state, dispatch] = useReducer(scanReducer, initialState);

  useEffect(() => {
    const ws = new WebSocket(webSocketAddress("/bookEntryWS"));

    ws.onmessage = ({ data }) => {
      let packet = JSON.parse(data);
      dispatch([packet._messageType, packet]);
    };
    return () => {
      try {
        ws.close();
      } catch (e) {}
    };
  }, []);

  //...
};

~

A neat use-case for useEffect, detailed by Sebastian De Deyne, is to reset the page number when the search query changes:

Clever 😊

A Complete Guide to useEffect →
Hooks, State, Closures, and useReducer →

JavaScript “loose” comparison, step by step

This handy tool visualizes loose comparison (==) in JavaScript works:

Below you can provide two values to compare, and see which steps of the “Abstract Equality Algorithm” as defined in Section 7.2.14 of the ECMAScript specification are executed.

JavaScript “loose” comparison, step by step →

iTunes auto-rating all played tracks …

For more than a year it’s been bugging me that iTunes “sometimes” would auto-rate played tracks. It happened on some albums, yet not all albums. Back in May 2018 I posted this video on YouTube showing the behaviour:

As you can see iTunes here automatically rates “En Masse” (track 10) from the moment it starts playing.

~

Back then I couldn’t quite put my finger on it, yet today I found out when this behaviour occurs: it happens when you’ve rated the album itself. For whatever reason iTunes copies over the album rating onto each track when you start playing it.

I don’t like this behaviour, as it’s unwanted: an album can be 5 stars, yet that does not mean all individual tracks on it are 5 stars.

(*) For the “Nachtlicht” album (from the second video) I’d make an exception though … it’s an exceptionally great album by Eefje de Visser and would highly recommend it to all who speak Belgian/Dutch!

So, Apple, can you fix this?

php-timecop – A PHP extension providing “time travel” capabilities

Now this looks handy, especially when you’re writing/testing code that’s dependent on the system’s time:

php-timecop is a PHP extension providing “time travel” and “time freezing” capabilities

  • Freeze time to a specific point.
  • Travel back to a specific point in time, but allow time to continue moving forward from there.
  • Scale time by a given scaling factor that will cause time to move at an accelerated pace.
  • Override time-related PHP stock functions and methods, which supports freezing or traveling time.
var_dump(date("Y-m-d")); // todays date
timecop_freeze(0);
var_dump(gmdate("Y-m-d H:i:s")); // string(19) "1970-01-01 00:00:00"
var_dump(strtotime("+100000 sec")); // int(100000)

php-timecop
Stub PHP date() and the crew with php-timecop

O.MG Cable – A normal looking USB cable that can hijack your computer when plugged in

It looks like an ordinary Lightning to USB Cable from Apple, yet it’s not: it’s got built-in Wifi and can receive payloads which get executed on the machine it’s plugged in 😱

However, let this be a reminder to never trust external cables (or USB outlets for that matter!), found USB sticks, etc.

O.MG Cable →

BeFunky – Photo Editing & Graphic Design Made for Everyone

At the top of Creating vs. Shipping there’s a featured image that contains the quote I mentioned in the post itself. To create that image, I turned to an online tool named “BeFunky Photo Editor”.

Even though the more advanced stuff (or extra variants of a brush) requires a paid account, it’s more than enough for when you don’t have any editor such as Photoshop or Affinity Photo available, and quickly need to do some basic stuff. Found it very intuitive to work with too 🙂

They also have an online collage maker and online designer tool.

Always great to see what’s possible on the web nowadays, sans plugins 💪

BeFunky Photo Editor →
BeFunky Collage Maker →
BeFunky Designer →

Quickly browse the history of any GitHub file with GitHistory.xyz

  1. Replace github.com with github.githistory.xyz in any file url
  2. There’s no step two

I see a good use case for education/demos this. Also love how everything flies in and out of the screen. Smooth

GitHistory.xyz →
GitHistory.xyz Source (GitHub) →

Automatically create an APK from your Progressive Web App with PWA2APK

As mentioned in How to publish your PWA onto the Google Play Store it’s now possible to publish your PWA’s onto the Google Play Store.

Thanks to PWA2APK you no longer need to manually create your APK: “just” enter the URL of your PWA and an APK – which you’ll need to publish manually – will be created from it.

This is a tool that Google themselves should’ve created.

PWA2APK – Convert any PWA (Progressive web app) to Google Play Ready Apps →

Making Future Interfaces: Inline SVG

Another great entry in the “Making Future Interfaces” video series by Heydon Pickering. This one here is a basic introduction to SVG.

Like with his other videos: even if you already know about the topic he’s talking about: just watch it, the presentation style and puns are great 🙂

Related: Here’s a post of mine on how to alter SVG path data on hover, something that is mentioned in the video.