React hooks - onClick and useEffect

Question

React Hooks is not updating to use the prop passed down and then stored. Usually I would resolve useState issues by calling functionality inside useEffect but in this case I need to update after a click event:

const [currentLayer, setCurrentLayer] = useState();

useEffect(() => {
    console.log(props.currentLayer) // props.currentLayer is defined
    setCurrentLayer(props.currentLayer);
}, [props.currentLayer]);

useEffect(() => {
    console.log(currentLayer); // currentLayer state is defined
}, [currentLayer]);

/*
 * Called when the timeline product is clicked
 */
const clickHandler = e => {
    console.log(currentLayer); // currentLayer state is undefined
    currentLayer.getSource().updateParams({ TIME: e.time });
};

return <Timeline options={props.timelineOptions} items={items} clickHandler={e => clickHandler(e)} />;

When clickHandler is called currentLayer state is undefined despite having been set earlier.

What is the best way to combine useEffect and the clickHandler, or am I missing something else?

Answer 1

import React from 'react'

const Component = (props) => {

  // ... your other logic

  const [currentLayer, setCurrentLayer] = useState(props.currentLayer)

  const clickHandler = e => {
    currentLayer.getSource().updateParams({ TIME: e.time });
  }

  return <Timeline options={props.timelineOptions} items={items} clickHandler={clickHandler} />

}

I don't see a reason why you need the useEffect hook. In fact, you should not set the currentLayer props in this component but rather use it as it is. This is so that when there is a change in the props.currentLayer, this component will also re-render.

Answer 2

        const clickHandler = e => {
            props.currentLayer.getSource().updateParams({ TIME: e.time });
        };