How to use React in your Sketch plugin — The Problem with Initial Data Load

Team Sketch2React’s Plug-in App Builder is build using my React tutorials as a boilerplate

This is part 4 in my series on How to use React in your Sketch plugin.

In this article we will take a closer look at the initial data load problem. It’s the problem that ad-hoc causes the React UI to render without Sketch data the first time you open your plug-in window.

I will also give you a solution to this problem.

Before we start

I’ll be using my plug-in project from my previous tutorial as a boilerplate.

If you haven’t read my previous articles in this series I strongly suggest that you do. This article will make a lot more sense if you read those first.

TLDR; There’s a complete demo repository at the end of this article.

Please note that the plug-in only responds to layers not pages. If you start the plug-in with a page selected, it will render without Sketch data. (It’s a good exercise for you to change this in your own version of this plug-in 😎👍)

The three parts of a plug-in with a React UI

A Sketch plug-in using a React UI can be divided into three parts:

The front-end

This is basically a web browser (including DevTools). It’s a WebView and its API is mimicking Electron’s BrowserWindow API.

The WebView floats, in a separate window, on top of the Sketch UI.

The WebView exchanges information with the back-end using a combination of window.postMessage (sending data) and event listeners (retrieving data)

The React UI

It’s in the WebView we load and show our React UI much like we would run a normal React app in a regular web browser.

The back-end

This is the part of the plug-in that has the connection to the data in your Sketch document. The back-end uses the Sketch developer API.

The back-end exchanges information with the front-end by event listers on the webContents object.

The problem with initial data load

Initial data load is the data that is sent from the back-end to the React UI once the WebView (front-end) has finished loading.

The problem with sending data to early

During my plug-in development I realized that, from time to time, when I started my plug-in the React UI didn’t receive any Sketch data?

I tried to figure out what was going wrong and I ended up explained to my self, step-by-step, what is happening when the plug-in starts.

What happens when the plug-in starts?

1. The back-end opens a WebView (front-end) and awaits the event did-finish-load to be emitted from the WebView
2. The front-end encounters JavaScript code that loads the React UI
3. The React UI listens to the event send-data
4. The front-end emits the event did-finish-load telling the back-end that everything has finished loading.
5. The back-end recognizes the event (did-finish-load) and sends data using the event send-data
6. The React UI recognizes the event (send-data) and populates the UI with the event’s data.

The problem

I thought that this happened synchronously, but it turned out that was not always the case. Sometimes step 4 happens before step 3 which leads to a scenario where the back-end sends data before the React UI is ready.

This leads to the React UI not being populated with any Sketch data.

The solution

We reverse the data exchange.

Instead of the back-end listening and responding to the event did-finish-load we tell the React UI to request data once it is ready.

This requires some modifications to our code:

my-command.js

In contrast to the event did-finish-load the get-data event is not triggered automatically by the WebView. The get-data event only triggers once called upon.

useSketchData.js

We add a refreshSketchData function to our React hook that triggers the back-end get-data event listener. This makes the plug-in back-end reply with Sketch data using the send-data event.

App.jsx

We add a useEffect that triggers once when the React UI is ready to handle Sketch data. In the useEffect we call our newly created function — refreshSketchData.

That’s it! 🎉 Now we have reversed the initial data load and by doing so we have prevented our React UI to render without Sketch data.

You can find a complete demo repository here.

For a more complex example of what you can build with my tutorials, please check out Sketch2React’s App Builder plug-in. It’s build on top of one of my tutorial repositories(!)

Thanks for reading!

/Fredrik

Team Sketch2React/Marcode/Stratos Tokens