updateTrigger does not work with react state

[hoang-ta]

Hello everyone,

I am using updateTrigger to change colors of layers randomly every 1 second in a React app.

• My layer declaration:

  const layer = new GeoJsonLayer({
    ...
    getLineColor: (feature: any) => [0 * trigger, 0 * trigger, 0 * trigger],
    updateTrigger: {
      getLineColor: trigger
    }
  });

• Randomly change color based on trigger value every 1 second:

 const [trigger, setTrigger] = React.useState(0.5);
  React.useEffect(() => {
    setTimeout(() => {
      let newTrigger = Math.random();
      while (newTrigger === trigger) {
        newTrigger = Math.random();
      }
      setTrigger(newTrigger);
    }, 1000);
  }, [trigger]);

• The above works fine but when I use layer as state, the updateTrigger does not work anymore

  const [layerState, setLayerState] = React.useState(layer);

• Sandbox url
• Demo clip:
  
• Here, as you can see, the updateTrigger only works with layer (normal variable) but does not work with layerState ( React state)

As my source code is using all layers as states and now i start using updateTrigger for my layer so i need to find a way for to solve this without removing codes involving my states.

Appreciate your help 😄

[Pessimistress]

Not sure what you are trying to accomplish by using state here. But when you call useState(layer), layer is the initial state, i.e. the value is only read the first time it's called. After that you need to call setLayerState to change layerState.

https://reactjs.org/docs/hooks-state.html#declaring-a-state-variable

[Pessimistress]

As I said, this is not about your understanding of deck.gl. Your component will not rerender by reassigning a variable. You need to read some React tutorials.

[Pessimistress]

function App() {
  const [color, setColor] = useState([0, 0, 0]);
  const layer = new GeoJsonLayer({
    ...
    getLineColor: f => ...
    updateTriggers: {
      getLineColor: color
    }
  });
  const changeColor = () => {
    setColor([255, 0, 0]);
  };

  return <DeckGL initialViewState={...} controller={true} layers={[layer]}>
    <button onClick={changeColor} >change color</button>
  </DeckGL>
}

[hoang-ta]

I understand that you have to use color as state so that when setColor app will re-render then layer will use new color value.

Actually, what i need to understand is what is the use of updateTriggers, because currently, with or without updateTriggers, it does not affect the result when clicking a button.

I have updated the sandbox code that look quite similar to deck.gl document (https://deck.gl/docs/api-reference/core/layer#updatetriggers)

[Pessimistress]

You are using a new data object on every render. If data changes shallowly then all accessors are called again. updateTriggers is only useful if you don't change the data object for performance reasons. See https://deck.gl/docs/developer-guide/performance#use-updatetriggers

[hoang-ta]

Thank you for pointing this out for me, I put data outside App then updateTriggers works as expected.