you have to use componentDidUpdate in class components and useEffect in Function components...

componentDidUpdate like this:

    componentDidUpdate(prevProps, prevState) {
            if (prevProps.something !== this.props.something) {
                   console.log('something prop has changed.')
            }
    }

componentDidUpdate will run console.log every time the new prop is different from prevProps.

and in useEffect you just add the props to its dependency:

useEffect(()=>{
    console.log('something prop has changed.')
},[props.something]);

useEffect will call that function every time the value of that prop changes.

Constructor is not a right place to make API calls.

You need to use lifecycle events:

• componentDidMount to run the initial fetch.
• componentDidUpdate to make the subsequent calls.

Make sure to compare the props with the previous props in componentDidUpdate to avoid fetching if the specific prop you care about hasn't changed.

class TranslationDetail extends Component {    
   componentDidMount() {
     this.fetchTrans();
   }

   componentDidUpdate(prevProps) {
     if (prevProps.params.id !== this.props.params.id) {
       this.fetchTrans();
     }
   }

   fetchTrans() {
     this.props.fetchTrans(this.props.params.id);
   }
}

Thanks to @Jonas Wilms for this answer. useEffect is what I'm looking for. Code looks like this

// not proper typescript but I don't care
const MyComponent = ({shouldUpdateState: boolean, updateParentState: Dispatch<CustomState>}): FC => {
    const [someVariableThatExistsInsideThisComponent, useSomeVariableThatExistsInsideThisComponent] = useState<CustomState>(DEFAULT_CUSTOM_STATE)
    useEffect(() => {
        if(shouldUpdateState) {
             updateParentState(someVariableThatExistsInsideThisComponent)
        }
    }, [shouldUpdateState])
...

}

As of v16.2.0, componentWillReceiveProps is the right place to update state, based on prop changes and since you want to use both current state and previous state in render, you need to maintain, two different state variables as you are doing

However, when you update the state based on previous state, use functional setState method

Check this answer for more details

When to use functional setState

componentWillReceiveProps(nextProps) {
    if (nextProps.amount !== this.state.current) {
        this.setState(prevState => ({ previous: prevState.current, current: nextProps.amount }));
    }
}

According to the latest RFC to React

State derived from props/state

The purpose of this pattern is to calculate some values derived from props for use during render.

Typically componentWillReceiveProps is used for this, although if the calculation is fast enough it could just be done in render.:

From v16.3.0 onwards, you would make use of

static getDerivedStateFromProps(nextProps, prevState) {
    if (
      !prevState ||
      prevState.current !== nextProps.amount
    ) {
      return {
        previous: prevState.current,
        current: nextProps.amount
      };
    }
}

All I want to do is call cueVideo when the currentVideo prop changes - I don't really need to re-render.

When new props are received, React will automatically call render() to update your component. Once all the updates have been flushed to the DOM, React will also call componentDidUpdate() on your component to give you an opportunity to respond to the changes. As the documentation says:

Use this as an opportunity to operate on the DOM when the component has been updated.

I would suggest this is the perfect place to call your code as needed.

you can't watch both props on one function, you'll have to add one watcher for every variable you want to trigger an action on change. You can create one handler (One single function) to be performed inside each watcher, like this:

<script>
export default {
  props : ['employeeIdNumber','attentanceDate'],
  data() {
    return {
      employee_id : this.employeeIdNumber,
      date : this.attentanceDate
    }
  }
  methods: {}
  watch: {
    employeeIdNumber(newVal, oldVal){
      this.handler('param')
    },
    attenanceDate(newVal, oldVal){
      this.handler('param')
    }
  },
  methods: {
    handler(params) {
      // do something here
    }
  }
</script>

Haven't used Meteor before, but if you want to do things in response to state/prop changes then componentDidUpdate() is the lifecycle method for it. E.g.

componentDidUpdate(prevProps) {
    if (this.props.bar !== prevProps.bar) {
        // bar prop has changed
        alert("bar changed");
    }
}

Without stores, using a prop

Just using a prop:

export let search = '';
....
$: if (search !== '') {       // make it react to changes (in the parent)
     doSomeThing(search);
   }; 

Stores

Svelte also has stores. A store is an observable object which can be observed everywhere even beyond you project with RxJS.
Example:

const unsubscribe = search.subscribe(s) => {
  doSomeThing(s);
}); 
onDestroy(unsubscribe);

In another component you can use search.set('Hi');

But looking forward for other solutions to handle these kind of changes in parent <-> child components or calling child Component methods.

From child to parent we can fire events.
But from parent to child ...? we can use a store or Component bind:this or ..? but ....

You can watch props to execute some code upon props changes:

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'child' : {
      template: `<p>{{ myprop }}</p>`,
      props: ['myprop'],
      watch: { 
        myprop: function(newVal, oldVal) { // watch it
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>

<div id="app">
  <child :myprop="text"></child>
  <button @click="text = 'Another text'">Change text</button>
</div>