Confused by useUpdate -> useRef/useLayoutEffect ...

[arwenpi]

Hi all.

I have a project where I draw a 3 dimensional plot. I have a set of 3d axes - a scaled axesHelper - and then what's effectively a 2d heightmap plotted in 3d. It rotates around the X axes so that the viewer gets an idea of the map.

I just upgraded to version 6 and now the axes and data plot have parted ways.

The axes seem fine - that already used useEffect - but the data mesh is there but seemingly failing to translate, and/or there's some other translation/rotation/ordering issue going on that I can't seem to get my head around and I can't reconcile them to get them back together.

I have tried setting the mesh position "manually" using position.x = ... and that does translate the mesh but the coordinate values no longer make sense to me as I think it's scaled and/or rotated... argh.

Previously the code did this:

const buffer = useUpdate(geometry => {
    geometry.translate(-14.5, -7.5, 0);
    geometry.rotateX(-Math.PI/2);
    geometry.setAttribute(
      "color",
      new Uint8BufferAttribute(cSet, COMPONENTS_PER_COLOUR, true)
    );
    // Smooth mesh please
    geometry.computeVertexNormals(); 
  }, []);

And based on the comments in the changelog, I have changed it to this:

  const buffer = useRef(null);

  useLayoutEffect(() => {
    const geometry = buffer.current;

    geometry.translate(-14.5, -7.5, 0);
    geometry.rotateX(-Math.PI/2);
    geometry.setAttribute(
      "color",
      new Uint8BufferAttribute(cSet, COMPONENTS_PER_COLOUR, true)
    );
    // Smooth mesh please
    geometry.computeVertexNormals();     
    
  }, []);

Ideas/thoughts greatly appreciated.

[drcmda]

the code should be the same, useUpdate did just that, a wrapper around uLE. the error must be somewhere else. do you have a super-reduced repro as a codesandbox?

[arwenpi]

I have a fix but I'm still confused and would like to understand the issue.

I played around with a sandbox and encountered non-deterministic behavior. I'd load it and it would be broken, then I'd do something like add a space to a line in the code sandbox and it would all magically shift into place and look as it should.

The issue would seem to be that I'm giving it an empty dependency array, because if I remove it it works. I would expect it to be only rendered once ever, so I'm not sure why this is happening?

This works fine, outputing uLE twice:

  useLayoutEffect(() => {
    const geometry = buffer.current;
                  
    geometry.translate(-14.5, -7.5, 0);
    geometry.rotateX(-Math.PI / 2);
    geometry.setAttribute(
      "color",
      new Uint8BufferAttribute(cSet, COMPONENTS_PER_COLOUR, true)
    );
    // Smooth mesh please
    geometry.computeVertexNormals();

    console.log("uLE");
  });

This mostly does not apply the translation/rotation (and outputs uLE once):

  useLayoutEffect(() => {
    const geometry = buffer.current;
                  
    geometry.translate(-14.5, -7.5, 0);
    geometry.rotateX(-Math.PI / 2);
    geometry.setAttribute(
      "color",
      new Uint8BufferAttribute(cSet, COMPONENTS_PER_COLOUR, true)
    );
    // Smooth mesh please
    geometry.computeVertexNormals();

    console.log("uLE");
  }, []);

(Only change is the [] on the last line).

It looks like in the case without the array it's actually running the code twice - once where it does nothing, and again where it applies the actual change. In the [] case it's running only once, and in that case it's doing nothing so...?! Is it some sort of race condition where the initial translation/rotation is being done before geometry is there?

Sandbox.

To have fun: leave [] in and add some spaces at a line in the source and see if it corrects itself (remove the [] to see that!)

[drcmda]

there are a lot of side effects in that component. with buffer especially i think you cant even change them once they're set.

[drcmda]

cleaned up some side effects and that immediately did it: https://codesandbox.io/s/hardcore-tree-x9zle

but there are still tons in there.

you cant have new Foo() inside the render function, functions that mutate stuff, invocations, updateMatrix(), etc. categorize this stuff into useMemo, useCallback, useState, useEffect and useLayoutEffect.

[drcmda]

  camera.position.z = 20;
  camera.updateProjectionMatrix();

thats a layout effect

    // xPos/yPos/z
    const vSet = new Float32Array(vertexCount * VERTICES_PER_POINT);

    //r/g/b
    const cSet = new Uint8Array(vertexCount * COMPONENTS_PER_COLOUR);

thats useState (given that they're not conditional, then it would be a useMemo)

  const colourMap = [];

  for (let i = -100; i < 100; i++) {
    colourMap.push(Math.abs(i) * 2);
    colourMap.push(Math.abs(i) * 2);
    colourMap.push(Math.abs(i) * 2);
  }

useMemo

  const vertices = [];
  const colours = [];
  let idx = 0,
    vci = 0;

  // Add a ground plane to cap between the layers:

  // 1
  vertices[idx++] = 0;
  vertices[idx++] = 0;
  vertices[idx++] = 0.0;

useMemo

etc

[arwenpi]

Looks like I need to go back to school on some of this. Thanks for your patience and help.