Add ref cleanup function

[sammy-SC]

Add option for ref function to return a clean up function.

<div ref={(_ref) => {
  // Use `_ref`
  return () => {
    // Clean up _ref
  };
}} />

If clean up function is not provided. Ref function is called with null like it has been before.

<div ref={(_ref) => {
  if (_ref) {
    // Use _ref
  } else {
    // Clean up _ref
  }
}} />

[sizebot]

Comparing: e1dd0a2...ebb8afc

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	+0.13%	153.64 kB	153.83 kB	+0.10%	48.90 kB	48.95 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.13%	155.56 kB	155.75 kB	+0.13%	49.51 kB	49.57 kB
facebook-www/ReactDOM-prod.classic.js	+0.09%	530.41 kB	530.88 kB	+0.11%	94.67 kB	94.77 kB
facebook-www/ReactDOM-prod.modern.js	+0.09%	515.66 kB	516.14 kB	+0.10%	92.49 kB	92.59 kB
facebook-www/ReactDOMForked-prod.classic.js	+0.09%	530.41 kB	530.88 kB	+0.11%	94.67 kB	94.77 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-profiling.js	+0.23%	302.54 kB	303.23 kB	+0.18%	53.29 kB	53.38 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.profiling.min.js	+0.22%	114.33 kB	114.58 kB	+0.19%	34.35 kB	34.41 kB
oss-stable/react-reconciler/cjs/react-reconciler.profiling.min.js	+0.22%	114.35 kB	114.60 kB	+0.19%	34.37 kB	34.43 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.min.js	+0.22%	115.77 kB	116.02 kB	+0.22%	34.76 kB	34.84 kB
oss-stable-semver/react-art/cjs/react-art.production.min.js	+0.21%	91.64 kB	91.84 kB	+0.18%	28.24 kB	28.29 kB
oss-stable/react-art/cjs/react-art.production.min.js	+0.21%	91.67 kB	91.86 kB	+0.19%	28.24 kB	28.29 kB
oss-experimental/react-art/cjs/react-art.production.min.js	+0.21%	93.09 kB	93.28 kB	+0.19%	28.65 kB	28.70 kB
react-native/implementations/ReactFabric-profiling.js	+0.21%	333.44 kB	334.13 kB	+0.19%	59.03 kB	59.15 kB
react-native/implementations/ReactNativeRenderer-profiling.js	+0.20%	339.67 kB	340.36 kB	+0.21%	60.01 kB	60.14 kB

Generated by 🚫 dangerJS against ebb8afc

[sebmarkbage]

You can place the if (refCleanup !== null) { inside here since you'll always do that check anyway so there's no extra checks. That way when it's not a function but a ref.current you don't do extra checks.

[sebmarkbage]

Normally it's good to check the type as close to where you get it from the user as possible but it'd probably be ok to do this type check during the cleanup instead.

That way there's no extra work on initial mount.

The VM has to check the type anyway before calling it upon cleanup.

[sebmarkbage]

It's unfortunate that this needs an extra field on every fiber. That's a lot of memory. It might be worth it though. Not sure. Compared to keeping an inner tuple that contains the original ref for comparison and a clean up.

[sebmarkbage]

Nits.

[gaearon]

What does this mean for various utilities that try to "merge" refs? I know we don't encourage them, but is there a reasonable upgrade path for them that works regardless of the ref type? i.e., are they fixable?

[sebmarkbage]

They'll have to update to support the new ref type. The raw imperative code is the same capability so there's no reason they couldn't.

[KurtGokhan]

@gaearon imho this changes makes merging refs simpler/cleaner. Here is a quick one I came up with next to the old implementation.

https://gist.github.com/KurtGokhan/9aafd8e83c9bc6a2946fe2dc7f2c1d19#file-use-combined-refs-new-ts

Note how the old implementation has to store the refs in a ref but new implementation only stores them locally.

[gaearon]

Here is a quick one I came up with next to the old implementation.

The trickier part is supporting all forms at the same time (object, function with null, and new style) cause refs themselves are coming from the user and could be of either kind.

[KurtGokhan]

The trickier part is supporting all forms at the same time (object, function with null, and new style) cause refs themselves are coming from the user and could be of either kind.

Yes, my example should cover all cases. When the ref doesn't return a cleanup function, setting the previous ref to null should be same as the old behavior.

[gaearon]

Ah i see. You’re using the new style for the combined one which simplifies things. I haven’t thought of that.

[dante01yoon]

@sammy-SC
Is there any usage examples using this ref clean up function? do you expect this changes gives brevity in codes?

[zfm-lucaschultz]

Hi, sorry for the question, but since this is a pretty small change, I couldn't find any information on this anywhere else.

Am I mistaken in assuming that this hasn't been released yet? I can't seem to find any mention of it in either the changelog or in the canary changelog. @rickhanlonii has mentioned in a comment that it has landed in canary. I would love to get more information about this because "in the canary" might mean I could already use it in Next.js.