In the MobX with React docs, in the Side effects and observables section there is a receipe to respond to changes inside a useEffect hook.
import React from 'react'
import { autorun } from 'mobx'
function useDocumentTitle(store: TStore) {
React.useEffect(
() =>
autorun(() => {
document.title = `${store.title} - ${store.sectionName}`
}),
[], // note empty dependencies
)
}
The example combines React.useEffect with mobx.autorun (but it could be mobx.reaction), but I can not see the benefit of autorun in the code. Once we are inside useEffect we can track our dependencies in the dependency array. The code is more clear, there is no need to dispose() and useEffect has a clear dependency array with what is needed.
import React from 'react'
import { autorun } from 'mobx'
function useDocumentTitle(store: TStore) {
React.useEffect(() => document.title = `${store.title} - ${store.sectionName}`
,[store.title, store.sectionName])
}
Is there any reason to follow the example as given?
Here is a Code Sandbox
autorun creates an observer, which means it will watch for any changes in store.title and store.sectionName, and automatically run whenever they change.
Setting it up in useEffect ensures that the autorun observer is only created once, and removed when the component is unmounted. Note that useEffect doesn't actually run when the store value changes; its effect is that autorun is (un)registered when the component (un)mounts.
Your second example without autorun would still run the effect and thus update the title if this component is re-rendered by other means, either because a parent component triggers a re-render, or if this component is wrapped in an observer, as in the Sandbox example:
function Test(props) {
// 2. rerendered by observer when the value changes
useEffect(() => {
// <-- 3. execute effect because (2) rendered with a different dependency
}, [props.store.size]); // <-- 1. observer notes this value is accessed
return ( ... );
}
// <-- 1. observe any store value that is accessed in the Test function
export default observer(Test);
(edited for clarification)
Related
I understand that the method returned by useState is asynchronous, however, when I run the this code, I am delaying the console.log by upto 5 seconds, but it still logs the previous value and not the updated value of the state variable. The updated value would be 2, but it still logs 1. In the react developer tools however, I can see the state changing as I press the button, though I am curious to know why after even such a delay the console prints an obsolete value? This is not the case with class components and setState but with function components and useState.
import "./App.css";
import React, { useState, useEffect } from "react";
function App() {
const [variable, setVariable] = useState(1);
const handleClick = () => {
setVariable(2);
setTimeout(() => {
console.log(variable);
}, 2000);
};
return <button onClick={handleClick}>Button</button>;
}
export default App;
In your code your setTimeout is getting the variable value from the closure at the time it was invoked and the callback function to the setTimeout was created. Check this GitHub issue for the detailed explanation.
In the same issue, they talk about utilizing useRef to do what you are attempting. This article by Dan Abramov packages this into a convenient useInterval hook.
State updates are asynchronous. That means, that in order to view the new value, you need to log It on the next render using useEffect and adding it to the dependencies array:
In this example, give a look at the order the logs appear:
First, you will have the current one, and once triggered, you will have the new value, and then it will become the 'old value' until triggered again.
import "./App.css";
import React, { useState, useEffect } from "react";
function App() {
const [counter, setCounter] = useState(0);
useEffect(() => { console.log(`new state rolled: ${counter}`);
}, [counter]);
console.log(`Before rolling new State value: ${counter}`);
const handleClick = () => setCounter(counter++)
return <button onClick={handleClick}>Button</button>;
}
export default App;
Another technic to console.log a value afterward a state change is to attach a callback to the setState:
setCounter(counter++, ()=> console.log(counter));
I hope it helps.
A state take some time to update. The proper way to log state when it updates, is to use the useEffect hook.
setTimeout attaches the timer and wait for that time, but it will keep the value of variable from the beginning of the timer, witch is 1
import "./App.css";
import React, { useState, useEffect } from "react";
function App() {
const [variable, setVariable] = useState(1);
const handleClick = () => {
setVariable(2);
};
useEffect(() => {
console.log(variable);
}, [variable]);
return <button onClick={handleClick}>Button</button>;
}
export default App;
This is not the case with class components and setState but with
function components and useState
In class components, React keep the state in this.state & then call the Component.render() method whenever its need to update due to a setState or prop change.
Its something like this,
// pseudocode ( Somewhere in React code )
const app = MyClassComponent();
app.render();
// user invoke a callback which trigger a setState,
app.setState(10);
// Then React will replace & call render(),
this.state = 10;
app.render();
Even though you cannot do this.state = 'whatever new value', React does that internally with class components to save the latest state value. Then react can call the render() method and render method will receive the latest state value from this.state
So, if you use a setTimeout in a class component,
setTimeout(() => {
console.log(this.state) // this render the latest value because React replace the value of `this.state` with latest one
}, 2000)
However in functional component, the behaviour is little bit different, Every time when component need to re render, React will call the component again, And you can think the functional components are like the render() method of class components.
// pseudocode ( Somewhere in React code )
// initial render
const app = MyFuctionalComponent();
// state update trigger and need to update. React will call your component again to build the new element tree.
const app2 = MyFunctionalComponent();
The variable value in app is 1 & variable value in app2 is 2.
Note: variable is just a classic variable which returned by a function that hooked to the component ( The value save to the variable is the value return by the hook when the component was rendering so it is not like this.state i.e its hold the value which was there when the component is rendering but not the latest value )
Therefore according to the Clouser, at the time your setTimeout callback invoke ( Which was called from app ) it should log 1.
How you can log the latest value ?
you can use useEffect which getting invoke once a render phase of a component is finished. Since the render phase is completed ( that mean the local state variables holds the new state values ) & variable changed your console log will log the current value.
useEffect(() => {
console.log(variable);
}, [variable])
If you need the behaviour you have in class components, you can try useRef hook. useRef is an object which holds the latest value just like this.state but notice that updating the value of useRef doesn't trigger a state update.
const ref = useRef(0);
const handleClick = () => {
setVariable(2); // still need to setVariable to trigger state update
ref.current = 2 // track the latest state value in ref as well.
setTimeout(() => {
console.log(ref.current); // you will log the latest value
}, 2000);
};
I am trying to fetch data in a functional React component using useEffect (since the function is asynchronous) and I compute and return the data in h2 tags that was fetched in this component. However, I want to fetch the data when in another component (App.js) I hit the enter key. I have an enter key handler which calls a useState which I believe should re-render the component but since the useEffect is in another component, I am not getting the calling of the useEffect as I intend. What is the best method to press the Enter key and have useEffect in another component run?
function handleKeyDown(event){
if(event.key === 'Enter'){
//this setHeadingText is a useState variable which should re-render in App.js
setHeadingText(name);
}
It sounds like your useEffect is specifying an empty dependency array (instructing to run only once):
useEffect(() => {
//fetch some data
}, []); // This empty array ensures it only runs 1 time
Have a look at this section in the docs: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
If your second component has access to your headingText state, try specifying your headingText as a dependency to the useEffect, and any changes to it should trigger your useEffect
useEffect(() => {
//fetch some data
}, [headingText]); // Only re-run the effect if headingText changes
Alternatively, remove the dependency array from your useEffect.
Note: this will cause the useEffect to run on every re-render
useEffect(() => {
//fetch some data
}); // run every time the component re-renders
Now that I have understood properly, I think this is the solution you wished for:
The headingText value that is being updated in your App.jsx component should be passed down to your Child component with the help of props. So use <Child headingText={headingText} /> while loading the Child component in your App.jsx.
Inside your Child component, receive the value like this function Child(props) or function Child({ headingText }) if you have more values to pass, prefer props.
Now you can easily access the changes in value made in your App component inside your Child component with the help of props.headingText or headingText respective to the way you defined your Child in point 2.
To re-render your Child component, you will now use the useEffect hook with its dependency set to headingText, like:
React.useEffect(() =>
{
// Code for refetching
}
, [headingText]); // or props.headingText if your Child component uses (props)
For example: CodeSandbox
Hope that helps you!
you can make a conditional rendering with the other component, so it get rendered only if you press Enter which would invoke an event:
//App.js
import {AnotherComponent} from './anothercomponent.js' //assuming the file is in src folder
function RenderOnEnter({pressed}){
if(pressed){
return (
<AnotherComponent/>
)
}
return null
}
function App(){
const [pressed,setPressed] = useState(false)
function handlePressed(e){
if(e.target.key === 'Enter'){
setPressed(True)
}
else{
setPressed(False)
}
}
return(
<div>
<button onClick={(e)=>handlePressed(e)}>Click me to obtain data!</button>
<RenderOnPress pressed={pressed}/>
</div>
)
}
I'm new to react.js hook. Not sure about why the following code doesn't work.
import React,{useEffect,useState} from "react"
function App() {
const [fruit,setFruit] = useState("orange");
setFruit("apple")
return (
<div>
<h1>{fruit}</h1>
</div>
);
}
export default App;
The error says that
Too many re-renders. React limits the number of renders to prevent an infinite loop.
You're setting the state inside the functional component body (The setFruit("apple") line) which will cause the component to re-render and when this happens all the component body will rerun again which will cause another set state call and so on which ultimately causes an infinite loop.
If you want to set the state when the component is mounting, You can use the useEffect hook to achieve that like so:
useEffect(() => {
setFruit("apple")
}, []);
Read more about the hook here.
you need to use useEffect
useEffect(() => {
setFruit("apple")
}, [])
The actual pattren of react is that when you set a state it cause rerender that means component re run again and recompile every line of code if it found a set state fucntion again it rerender and that's what happening in youe code. To prevent this you can use useEffect hook which accepts a callback function and a dependency array
For Example
useEffect(() => {}, []);
The code in every useEffect will run with first time component mount and if you want to run the code again you need to pass dependency in 2nd argument of useEffect which decide that if the dependency change it's value the code in useEffect will run again.
In your case you can set state like this
useEffect(() => {
setFruit("apple")
}, []);
In this reactjs doc example about custom hooks
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
we suppose tnhat is called by this Foo component
function Foo(props) {
const [state, setState] = useState({...});
...
useFriendStatus(friendID)
...
}
When handleStatusChange is invoked and the useEffect local state isOnline change, what will happend ?
will the Foo component get rendered more or less immediately (i know setState() is asynch) or it will wait until its own state or props gets updated ?
in my knowledge a custom hook will be invoked only when the component which call it is rendered or am i wrong ?
When handleStatusChange is invoked and the useEffect local state isOnline change, what will happend ?
will the Foo component get rendered more or less immediately (i know setState() is asynch) or it will wait until its own state or props gets updated ?
Setting state is what causes react components to rerender. As soon as you call setIsOnline, the component's state has been updated, and it rerenders more or less immediately.
in my knowledge a custom hook will be invoked only when the component which call it is rendered or am i wrong ?
Custom hooks are a convenience: they let you reuse code, or simply make your code more readable. But they don't change what react knows. React just knows that you called useState, useEffect, and later setIsOnline. It doesn't know whether that code is written inline or extracted to a helper method.
If React sees a call to useState while rendering, it will set up a state variable and a setter function. If you call that setter function, it will rerender the component.
I am attempting to pass an object through props to a child component. The value is set in the useEffect hook and lost when passed to my child component.
I have tried setting the value of the object outside the useEffect hook in a separate function but the value is still lost.
import React, { useState, useEffect } from 'react';
function SetValue(props){
let users = {};
useEffect(() => {
users = { user: 'bob' };
})
return <NewComponent users={users} />
}
export default SetValue;
I expected props.users to be { user: 'bob' } and not an empty object {}.
The error message is:
"Assignments to the 'users' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps"
About useEffect hook:
By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. more
This means that function inside useEffect will be called after rendering of the component. That's why you have an empty object.
About the error. You have it because React doesn't remember your users variable - it will be recreated on each render of SetValue component. It will be better to use useState hook to set value in useEffect and remember it on the next render.
And one more note. Don't forget about passing the second argument in useEffect with an array of dependencies. Now your hook will be called after each render of SetValue component.
Here's how to use useState hook:
import React, { useState, useEffect } from 'react';
function SetValue(props){
const [users, setUsers] = useState({});
useEffect(() => {
setUsers({ user: 'bob' });
}, [
//here you could pass dependencies, or leave it empty to call this effect only on first render
]);
return <NewComponent users={users} />
}
export default SetValue;
This warning --"Assignments to the 'users' variable from inside React Hook useEffect will be lost after each render-- is the reason why state concept exists in React. React component doesn't preserve the value of normal javascript variables throughout successive re-renders(component lifecycle).Thats where react state helps so that changes to the state can be reflected in DOM if component re-renders.