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
- React - How to add a component to a string
- React dispatching action does nothing
- Unexpected token syntax error in a stateless function using arrow syntax
- touch previous props with React.useEffect()
- Image Tag Not Displaying Image
- how to use form in React as a component
- Why is it saving a state variable looks like one render behind whenever I update a state?
- Connected component doesn't re-render after store changed from another connected component
- Component will not wait for API response before rendering
- Flow - Object may be null, but it is clearly defined in the constructor
- React: Map an array inside object
- Mapping objects, and using state, and passing value through a function in setState
- Can home_url() be dynamically passed to a theme built with React?
- My html template carousel not working on react
- React, Redux, React-Router - Stuck at installing material-ui
- JSON from Django render() to React.js
- React use debounce with setState
- Why match media in react does not work properly?
- does not contain a default export even after being correctly imported in React
- How to combine two json apis in react based on id
- How to create a non-modal React dialog?
- Convert month and year into normal date format in reactjs
- React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering
- Next.js multiple .env files
- http response not setting cookie in the browser
- How to create dynamic search filter in react JS?
- Javascript - Unify between objects values within an array
- Interacting with the parent component in react
- React Router - get URL params outside of page component (inside of layout footer)
- React: Nothing was returned from render. This usually means a return statement is missing