React re-write componentWillReceiveProps in useEffect

Question

So I am re-writing a component with hooks, and I ran into an interesting challenge, I need to mimick some old behaviour of componentWillReceiveProps with the useEffect hook.

My old code looks like:

componentWillReceiveProps(nextProps: Props) {

  const prevLateVal = get(`lateMinutes[${bookingId}].value`, this.props);
  const nextLateVal = get(`lateMinutes[${bookingId}].value`, nextProps); //see here, 
//we use next props

  if (typeof nextLateVal !== 'undefined' && prevLateVal !== nextLateVal) {
    client.connect(bookingId, nextLateVal === null ? 0 : nextLateVal);

  }
}

You see, I am initiating a const based on nextProps, then in the if statement i do a couple checks based on that nextVal, now, I know that we can specify a second argument to useEffect to run it only when a prop changes, but what about those checks, how can i implement something similar to nextProps?

Can't you do that check inside the function's body before the return? — cbdeveloper, Sep 06 '19 at 11:37

score 6 · Accepted Answer · answered Sep 06 '19 at 11:59

You can create custom hook:

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.prevLateVal = value;
  });
  return ref.prevLateVal;
}

and get it used in useEffect()

const Component = (props) => {
    const currentLateValue = get(`lateMinutes[${bookingId}].value`, props)
    const prevLateVal = usePrevious(currentLateValue);
    useEffect(() => {
        if(prevLateVal !== currentLateValue) {
         // process here
        }
    }, [currentLateValue]) // This will be executed only if currentLateValue changes.
}

Mohamed Ramrami · Answer 2 · 2019-09-06T12:02:47.837

3

You can use useRef to save the prev props, and use useEffect to run when props change, something like this :

function MyComponent(props) {

  const prevProps = useRef(props);

  useEffect(() => {
    const prevLateVal = get(`lateMinutes[${bookingId}].value`, prevProps.current);
    const nextLateVal = get(`lateMinutes[${bookingId}].value`, props);

    if (typeof nextLateVal !== 'undefined' && prevLateVal !== nextLateVal) {
      client.connect(bookingId, nextLateVal === null ? 0 : nextLateVal);
    }    

    prevProps.current = props;
  }, [props, bookingId]);

  return (<div>...</div>)
}

edited Sep 06 '19 at 12:02

answered Sep 06 '19 at 11:58

Mohamed Ramrami

12,026
4
33
49

it will run on every render and not on props change, also considering the logic, it should run only on specific object attribute change – Dennis Vash Sep 06 '19 at 12:00
I added props to the second param to useEffect – Mohamed Ramrami Sep 06 '19 at 12:03
It's still buggy because you assuming props reference is changing – Dennis Vash Sep 06 '19 at 12:04
Well props are immutable , aren't they ? – Mohamed Ramrami Sep 06 '19 at 12:05
immutable inside the component, but its father may change attribute and not the reference – Dennis Vash Sep 06 '19 at 12:06

score 3 · Answer 3 · answered Sep 06 '19 at 12:22

With the current logic, you want to fire a side-effect only on lateMinutes[${bookingId}].value change:

const Component = props => {
  useEffect(() => {
    console.log('prop lateMinutes changed');
    // ...
  }, [props[`lateMinutes[${bookingId}].value`]);
  return ...
};

score 0 · Answer 4 · answered Sep 06 '19 at 11:54

0

You don’t need hooks to handle prerender lifecycle. Just put the things in the functional component before returning JSX as the function itself is equivalent to render method of class based component.

answered Sep 06 '19 at 11:54

Cheepo2109

37
6

React re-write componentWillReceiveProps in useEffect

4 Answers4

Linked

Related