How to listen state changes in react.js?

The following lifecycle methods will be called when state changes. You can use the provided arguments and the current state to determine if something meaningful changed.

componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) 

In 2020 you can listen to state changes with the useEffect hook like this

export function MyComponent(props) { const [myState, setMyState] = useState('initialState') useEffect(() => { console.log(myState, '- Has changed') },[myState]) // <-- here put the parameter to listen, react will re-render component when your state will be changed } 

Since React 16.8 in 2019 with useState and useEffect Hooks, following are now equivalent (in simple cases):

AngularJS:

$scope.name = 'misko' $scope.$watch('name', getSearchResults) <input ng-model="name" /> 

React:

const [name, setName] = useState('misko') useEffect(getSearchResults, [name]) <input value={name} onChange={e => setName(e.target.value)} /> 

I think you should be using below Component Lifecycle as if you have an input property which on update needs to trigger your component update then this is the best place to do it as its will be called before render you even can do update component state to be reflected on the view.

componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } 

If you use hooks like const [ name , setName ] = useState (' '), you can try the following:

 useEffect(() => { console.log('Listening: ', name); }, [name]); 

Using useState with useEffect as described above is absolutely correct way. But if getSearchResults function returns subscription then useEffect should return a function which will be responsible for unsubscribing the subscription . Returned function from useEffect will run before each change to dependency(name in above case) and on component destroy

It's been a while but for future reference: the method shouldComponentUpdate() can be used.

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 

ref: https://reactjs.org/docs/react-component.html

I use this code to see which one in the dependencies changes. This is better than the pure useEffect in many cases.

// useWatch.js import { useEffect, useMemo, useRef } from 'react'; export function useWatchStateChange(callback, dependencies) { const initialRefVal = useMemo(() => dependencies.map(() => null), []); const refs = useRef(initialRefVal); useEffect(() => { for(let [index, dep] of dependencies.entries()) { dep = typeof(dep) === 'object' ? JSON.stringify(dep) : dep; const ref = refs.current[index]; if(ref !== dep) { callback(index, ref, dep); refs.current[index] = dep; } } // eslint-disable-next-line react-hooks/exhaustive-deps }, dependencies); } 

And in my React component

// App.js import { useWatchStateChange } from 'useWatch'; ... useWatchStateChange((depIndex, prevVal, currentVal) => { if(depIndex !== 1) { return } // only focus on dep2 changes doSomething("dep2 now changes", dep1+dep2+dep3); }, [ dep1, dep2, dep3 ]);