ES6 Instructions components

[islemaster]

Second attempt to merge #23689. This caused a regression on production the first time we released it. Here's the hotfix revert: #23714.

No known user bad, but it drove our JavaScript error rate high enough to page the DOTD. The reported error was

(TypeError) null is not an object (evaluating 'n.codeWorkspaceContainer.getWrappedInstance')
  at onResize

We can tell the error is happening here, in the onResize handler of InstructionsWithWorkspace. The issue seems to be that the onResize handler is getting called in a situation where the ref is unbound.

code-dot-org/apps/src/templates/instructions/InstructionsWithWorkspace.jsx

Lines 63 to 64 in e97c8f6

	const codeWorkspaceHeight = this.codeWorkspaceContainer
	.getWrappedInstance().getRenderedHeight();

After successfully repro'ing this on my local machine and a good deal of trial and error, I discovered that under the original implementation the ref callback was being called on every render, and in maybe 10% of those calls the ref was set to null.

Defining the ref callback once on the component instance instead of within the render method fixes this (the ref callback only happens once when the component mounts). I believe this is because the component sees a new function every time. We've done inline ref callbacks in lots of other places, but in this case it's on CodeWorkspace instead of a React-defined DOMComponent, which may explain the different behavior. I wonder if we've found a bug / edge case in the version of React we are using. In any case, I've verified locally that this fixes the issue.

[caleybrock]

👍

[islemaster]

Related issues on the React repo:

• Refs callback is called twice on every render, even when component instance is reused facebook/react#8619
• [BUG] ref function gets called twice on update (but not on first mount), first call with null value. facebook/react#9328