Avoiding state update on unmounted React component within useEffect hook

The hooks introduced with React 16.8 are a nice way to control state and other features on functional React components. They discard the necessity of third-party libraries such as Recompose – which is the inspiration for React hooks, by the way.

One way one can apply the useEffect hook, for example, is to mimic the behavior of componentDidMount event to bind a value returned by an asynchronous function to a given state. Like:

const React, { useEffect, useState } from 'react';

export default Component = () => {
    const [ data, setData ] = useState(null);
    useEffect(() => {
        (async () {
            setData(await someAsyncApiCall());
        })();
    }, []);
    return (<span>{ data }</span>);

Calling the useEffect hook with an empty array will make it be called only when the component was mounted, i.e. is the same as componentDidMount event.

However, if the component has unmounted some point before the async call finishes, it’s likely to get the following error in the console:

Can’t perform a React state update on an unmounted component

That happens because the async function called setData, which is the state setter, after the component has unmounted. To fix that error, it’s required to cancel the async function before changing the state in case the component did unmount.

In a “regular” React component, there is the componentWillUnmount event. One could set a flag to indicate the component is not mounted anymore to avoid setting the state late. Simulating this same approach with hooks is not hard. A function returned by a useEffect hook with an empty array in the second argument (the case above) run when the component will unmount. So, one could have the following:

const React, { useEffect, useState } from 'react';

export default Component = () => {
    const [ data, setData ] = useState(null);
    useEffect(() => {
        let mounted = true; // Indicate the mount state
        (async () {
            const data = await someAsyncApiCall();
            if (!mounted) return; // Exits if comp. is not mounted
            setData(data);
        })();
        return () => { // Runs when component will unmount
            mounted = false;
        };
    }, []);
    return (<span>{ data }</span>);

Now the error is gone since the state is not updated if the component is not mounted anymore.

I particularly am fond of hooks. I used to add Recompose to projects in the past and like the way the code looks with functional components. There is also, the performance benefits.

If you have questions or suggestions, feel free to express yourself in the comments below.

Advertisements

Custom setters with React useState hook

One of the recent additions to React was its hooks. With that, developers don’t need to rely on libraries such as Recompose to add state (and other features) to functional components.

If you’re one of those devs and were used to create custom setters for states, it’s possible you find the new useState hook somewhat limited. But you still can write your own setters, wrapping the setter returned by useState into another function.

Consider the following Recompose code:

withStateHandlers({
    counter: 0,
}, {
    increment: ({ counter }) => {
        return () => ({
            counter: counter + 1,
        });
    },
    decrement: ({ counter }) => {
        return () => ({
            counter: counter - 1,
        });
    },
});

You may write the same logic with React hooks this way:

const [ counter, setCounter ] = useState(0);
const increment = () => {
    setCounter(counter + 1);
};
const decrement = () => {
    setCounter(counter - 1);
};

This probably seems pretty obvious but there are some cases where you may need to apply some side-effect to your setter and this approach would be useful. Here it goes an example, given the same state above:

const [ counter, _setCounter ] = useState(0);
const setCounter = (counter) => {
    // Some side-effect here ...
    _setCounter(counter);
    // ... or there
};

For questions and suggestions, please leave a comment below.

Laravel and NodeJS messaging using Redis Pub/Sub

I was recently working on this project that was composed of two different parts: a web application built in PHP with Laravel, and an AWS Lambda function written in NodeJS. In the past, both applications exchanged data using a common MySQL database. With time, this setup showed up very inefficient. As the number of “messages” sent and received increased, the database started to not handling well the volume of reads and writes required to support both “applications” — the Lambda function is not an application per se but you know what I mean, right?

The first thing we tried was changing the database schema to focus on performance, rather than on data integrity. We dropped some constraints and changed how the data was stored to achieve that. The updates soon showed themselves not enough.

In a second iteration, we started playing around with Redis. Due to its nature, a key/value store and not a relational database, it’s a lot faster than MySQL. The first attempt using Redis involved simply moving the data we’re storing into the database to a set. It seemed to work well but just after a few tests on a staging server we realized that approach wouldn’t work for the system needs. When retrieving the data using the SCAN command, the order of returned elements is not guaranteed. And that was an important downside for us, the business logic required us to read the data in the same order it was written.

Finally, we got to the setup we have now: both sides — the web app and the Lambda function — were updated to use Redis Pub/Sub implementation. Laravel supports Redis out of the box, which was a nice thing to have. For the NodeJS part, we used NodeRedis.

Subscribing to a channel

As I mentioned, Laravel already has an interface to deal with Redis. It still needs an underlying client, but most of the operations are pretty straightforward. You may refer to the Laravel docs for more info. Subscribing to a channel requires a single method call:

Redis::subscribe([ 'channel_name' ], function ($message) {
    /* Do whatever you need with the message */
}

I’m using an Artisan command to start this listener, this way:

class Subscriber extends Command
{
    protected $signature = 'redis:subscriber';

    protected $description = '...';

    public function handle()
    {
        Redis::subscribe([ 'channel_name' ], function ($message) {
            $this->processMessage($message);
        });
    }

    public function processMessage(string $message)
    {
        /* Handles the received message */
        $this->info(sprintf('Message received: %s', $message));
    }
}

Now we simply have to trigger the command to start listening to the channel.

You’ll notice that after a minute without receiving any data, the next time the subscriber gets a message an error will be thrown. That’s because the connection timed out. To fix that, we added the following settings to the config/database.php file, inside the "redis" block:

'read_write_timeout' => 0,
'persistent' => 1,

Publishing to the channel

On the NodeJS side, we need the aforementioned library. To install it:

$ npm install redis

After that, we’ll need to write our Lambda function that publishes to the channel. Since the focus is the Pub/Sub flow, I’m not using any particular logic to create the message here, just returning the attribute received with the event.

const redis = require('redis');
const client = redis.createClient();

const handler = (event, context) => {
    const message = processEvent(event);
    client.publish('channel_name', message);
    return context.done(null, {
        message,
    });
};

const processEvent = (event) => {
    /* Handles the event and return the message to publish */
    return event.message;
};

exports.handler = handler;

Notice I’m not passing any properties to the createClient function. You’ll probably want to set the host or any other custom configuration you have to properly connect to the Redis instance. Check the NodeRedis docs for more info about the available properties.

Testing all together

First, start the Artisan command. If you used the same name from my example above, you should be able to run the following:

$ php artisan redis:subscriber

Then, you have to run your Lambda function to publish messages. You can do that after deploying the code to AWS. Or, you can run it locally with a mockup of the Lambda env. Something like this:

const http = require('http');

// This is where the Lambda function is
const lambda = require('./lambda');

const context = {
    done: (error, success) => {
        if (error) {
            console.error('FAIL:', error);
            return;
        }
        console.log('OK:', success);
    },
};

const server = http.createServer((request, response) => {
    let data = '';
    request.on('data', (chunk) => {
        data += chunk;
    });
    request.on('end', () => {
        if (data) {
            const event = JSON.parse(data);
            lambda.handler(event, context);
        }
        response.end();
    });
});

server.on('clientError', (error, socket) => {
    socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
});

server.listen(3000);

This stub is a very basic mockup of Lambda env. It lacks some better error handling and validation. But for the purpose of this test, it does what we need. I strongly don’t recommend using this code in production, though.

If you named the script above, for instance, as web.js, you should be able to run it:

$ node web.js

And then invoke the function with cURL:

$ curl -d '{"message":"Hello world!"}' http://localhost:3000

The request body (with the -d param in the command) will be parsed as JSON and sent to the Lambda function as the event. If you check the function again, you’ll notice we’re using the message attribute there.

After executing that command, you should see two different outputs in your console. One from the Lambda mockup, which may look like this:

OK: { message: 'Hello world!' }

And another from the Artisan command:

Message received: Hello world!

The output will change in according to the message with the request body.

Conclusion

In this sample code, I showed the basics of Redis Pub/Sub. You don’t necessarily need AWS Lambda to use it. I just wanted to show up a “nearly” real-life use case. Sure, this is still not a real application, but I hope you got the idea.

You may have noticed, but this is a way to build what the cool kids out there call Microservices. If this is all new to you, maybe this is an opportunity to give it a chance and try to build your first distributed application.

Got comments or questions? Feel free to share them below.

Using MutationObserver API and undo.js to track DOM changes

I was recently working on this project that had a kind of drag and drop builder. Users should be able to drag items into a specific building area to assembly stuff — I’m sorry for not giving more details, by the time I’m writing this the product is not yet released. One of the features I had to implement was a pair of buttons to undo and redo actions.

Every time an item is added to the builder, a DOM change happens. So, I started to look for ways to track changes in the DOM. That’s when I found about MutationObserver API. That web API is implemented by most of the modern browsers, Internet Explorer 11+ included, and allows you to observe DOM changes using a simple approach. The second tool that helped me build this was undo.js. It’s a simple Javascript class that allows developers to implement actions tracking in an exceptionally easy way.

After coding this feature, it seemed to me that combination of tools might be useful for a lot of other use cases. So I wrote this fiddle to demonstrate how they can be used together:

https://jsfiddle.net/straube/wh35f5yp

If you have any question, the comments area below is all yours.

Testing Stripe webhooks when using Laravel Cashier

I’m not sure why this is not in the docs, but if you’re using Laravel Cashier and want to test Stripe webhooks – in test, not live, mode – you have to set the following env var:

CASHIER_ENV=testing

I’ve spent some time checking around my code until I found that.

Using make to build a NodeJS app

Do you know you can use the good ol’ make to build your NodeJS app? I wrote a little about it in my latest post on Kettle’s Blog:

https://blog.kettle.io/building-aws-lambda-apps-using-make/

Injecting controller actions in Laravel views

Disclaimer: Depending on the kind of logic you need, it’s also possible to use View Composers to achieve a similar result.

I’m using Laravel in this new project I’m working on. Some other PHP frameworks have a feature to use controllers as services. Symfony, for instance, has something like that. The project team thought Laravel, as Symfony-based, would have something like that. Well, if it has, it’s not clear in the docs.

Another team member ended up with a solution I never thought before:

 @inject('someController', 'App\Http\Controllers\SomeController')
 {!! $someController->index() !!}

Now, we’re using Blade’s @inject directive to call controller actions from inside views. That’s useful for reusing actions as widgets, for example.

If you find that interesting and want to use in your application, remember two things:

  1. Since you’re calling the action method directly, you have to pass all the required params. If it expects a request instance, you can do this: $someController->index(request()).
  2. Probably the method returns a view that contains HTML code. So wrap the call within {!! and !!}. Using the {{ }} regular tag will cause the code to be escaped.