score:48
I haven't used Angular, but reading the link above, it seems that you're trying to code for something that you don't need to handle. You make changes to state in your React component hierarchy (via this.setState()) and React will cause your component to be re-rendered (effectively 'listening' for changes). If you want to 'listen' from another component in your hierarchy then you have two options:
- Pass handlers down (via props) from a common parent and have them update the parent's state, causing the hierarchy below the parent to be re-rendered.
- Alternatively, to avoid an explosion of handlers cascading down the hierarchy, you should look at the flux pattern, which moves your state into data stores and allows components to watch them for changes. The Fluxxor plugin is very useful for managing this.
score:1
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()
score:4
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
score:11
If you use hooks like const [ name , setName ] = useState (' '), you can try the following:
useEffect(() => {
console.log('Listening: ', name);
}, [name]);
score:30
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
});
}
score:32
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)} />
score:49
In 2020 you can listen state changes with 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
}
score:365
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)
Source: stackoverflow.com
Related Query
- How to listen redux state changes in react hooks?
- How to listen state changes in react.js?
- How to communicate UI state changes between React components with Redux?
- How to listen for changes in prop state in React.js?
- How to clone react state array without making changes to it?
- How to listen to external variable changes in React
- How to re-render only one component on hover when state changes in React
- React hooks - how to force useEffect to run when state changes to the same value?
- How to update state after React Router changes automatically?
- How to refresh components when parent state changes in react when using react router
- How React listens for state changes
- React how to update ui after every loop iteration which changes state array?
- How can I make transient/one-off state changes to a React component from one of its ancestors?
- REACT + FIRESTORE : Listen to changes in firebase collection in a react component to automatically update the react state
- How to render component conditionally when leaf value of global state changes using react hooks
- When using React / Redux, how is dispatching an action that merely changes the Redux state vs actually doing some task?
- How to write a generic method to handle multiple state changes in React
- How to listen for changes in react semantic dropdown element?
- How do I update state when a window variable changes in react
- How to Differentiate input vs button state changes in react redux
- How to disable a button when state changes in React
- How does the React component's state changes by using [event.target.name]?
- React TypeScript: How to call an api and set state each time the route changes
- how to reload component back to original state when a prop changes in react
- How to share state between React function and re-render on changes
- React + TypeScript - how to update state with single object with a "dynamic" set of changes
- How would I re-render the list everytime the state changes for this text filter using react hooks
- how to Test React Hook State Changes
- How to listen to route changes in react router v5?
- How to update nested state properties in React
More Query from same tag
- Decrease the components size of Material UI
- React: setting state in container from within functional component
- How to call useQuery hook conditionally?
- How to detect screen orientation in mobile website when using react js and orientationchange event?
- how to loop in semantic ui react?
- 'dispatch' is not defined when using useReducer with useContext in react
- Need to make navlinks to show only when bar is clicked on smaller screened devices in react hooks
- Uploading a file using only the input field - React Hook Form
- How to get TextField(Material-UI) value from hook react component?
- Amplify react custom SignIn UI reverting after signing in
- Testing React componentWillUnmount using Jest
- How To Conditional Render Data From 2 Data Sources Using React
- counting props that aren't null
- Radio buttons not visibly changing upon click in React
- How to trigger a Google Tag manager Trigger from my react (Gatsby) component?
- Updating the forms in react js doesn't keep track of the state of all the props
- making React work together with math.js library
- Frontend not updating when using useState
- Slider to go to the end from index[0] React Typescript project
- Interpolate React Link component and pass it as a prop
- Passing multiple parameters to function in reactjs
- How to clear input after form submit (React)
- How to trigger event in NodeJs based on database time values?
- Err: cannot get /
- Save array of objects in state - ReactJS
- ReferenceError: Cannot access 'trainingID' before initialization
- How to delete the Token from backend in Django
- Using Concurrently with React and Flask
- React - displaying images side by side
- Size of object array is being added to the localstorage not the array of objects