score:2
Accepted answer
inside useeffect
the callback doesn't change since it's not a dependency. thus, the time inside the subscription callback is always 0.
working solution with rx.js
:
settime
call is based on prevstate inside callback function.
import react, { usestate, useeffect } from "react";
import { render } from "react-dom";
import "./style.css";
import { interval } from "rxjs";
import { take } from "rxjs/operators";
const inter$ = interval(1000);
function app() {
const [time, settime] = usestate(0);
useeffect(() => {
console.log("hello");
inter$.subscribe(() => {
settime(prevtime => prevtime + 1);
console.log("hella");
});
}, []);
return <div>{time}</div>;
}
render(<app />, document.getelementbyid("root"));
score:1
change settime(time+1); to settime(time=>time+1); heres the full code :
import react, { usestate, useeffect, usecallback } from 'react';
import { render } from 'react-dom';
import './style.css';
import {interval} from 'rxjs'
import { take } from 'rxjs/operators';
const inter$ = interval(1000);
function app(){
const [time, settime] = usestate(0);
const callback = usecallback(()=> {
settime(time=>time+1);
console.log('hella');
}, [time])
useeffect(()=>{
console.log('hello')
inter$.subscribe(callback)
}, [])
return <div>{time}</div>
}
render(<app />, document.getelementbyid('root'));
Source: stackoverflow.com
Related Query
- why state always be 0, even after using useCallback
- Why my state is not getting updated even after writing the setState method?
- Why isn't child component re-rendered even though parent state is updated using hooks
- Why state is not updated after button click using hooks?
- React component re-rendering even after using memo and useCallback
- while this.state is a Javascript object , why is state null even after passing into it a state that has data?
- When using a functional component, why do parent state changes cause child to re-render even if context value doesn't change
- Why React not re-rendering components even if it's state changes after an API call
- Why is the state still null even after setting it?
- Why is state variable remaining same after updating it using setState function of useState hook in React?
- Why my code is not fetching updated details from API's even after changing state in React JS?
- console log the state after using useState doesn't return the current value
- Redux -- why is state all in one place, even state that isn't global?
- Why Code Coverage in react app is empty? Tried using npm run test -- --coverage. But always showing empty code coverage
- ReactJS: checkbox state persists even after re-rendering of Component
- How to get the changed state after an async action, using React functional hooks
- React Ref's offsetheight, always returns '0' for jest test case even after the content is loaded
- How to test React state after calling a component method that updates state - using Enzyme
- Using state after dispatch has fired
- React, updating state in child component using props after async call in parent component
- Why does calling useState's setter with the same value subsequently trigger a component update even if the old state equals the new state?
- Why NextJS using Docker container did not reload after changed code for dev environment?
- Why Immer didn't return me a new state even if I modified the draft?
- Why React does't compare Previous State and New State before re rendering? Why it always render when setState is called?
- Using updated redux state right after dispatch
- Apollo MockedProvider always returns undefined for data field, even after loading
- Why it is must to import "react" even if my client.js is not using it
- How to get current state inside useCallback when using useReducer?
- Why the () in this.state when using the current state as a parameter
- why Functional component is not re-rendering even after a prop object change?
More Query from same tag
- Fixing react-responsive-carousel display on mobile
- Add default value option in select tag
- Prevent class .cke_show_borders to be added to table element in ckeditor
- How can I open the collapsing div through prop?
- convert angularJS function to a react function
- How to have inputs work while having a listener on keyDown, keyUp
- React - What is meant by 'Do not use HOC’s in the render method of a component. Access the HOC outside the component definition.'?
- How do you unzip a string in React
- How to send multiple data to server using for loop
- Posting to .NET Core WebAPI with ReactJS frontend and fetch api
- React updating single object of an array of objects - map vs entire array
- How to use a type from React for props of my own component?
- React in Rails - No routes matched location issue
- How to test if google maps function runs on componentDidUpdate() with Jest + Enzyme?
- React form not filling out with fetched data
- How to avoid using binding in react using es6?
- Passing props to a Function as a Child component
- How can I fix height on MaterialUI?
- With click being handled in `addEventListener`, the change of state on click happens only once. [React Hooks]
- How do I filter a list using parmeters within a nested object?
- Unable to display information from fetched serialized api in react component
- why does my react router links work in drawer but not header
- After upgrading react 16.2 to 16.8, context consumers receive previous value instead of current
- 'Cannot Find Module' when using an Image in React
- Can I create a prop that inherits another prop's generic type?
- Can't see my state updated if i console.log outside the axios .then function
- AWS Beanstalk CLI keeps deploying react/npm development build
- Using useHistory on React
- Hide and show table columns by Checkbox check/uncheck
- How to render element only once in conditional rendering?