I know the gist of converting React Class components to functional components, but I found an instance where I nor my searching on the internet know the answer.
export default class Counter extends Component<Props, State> {
count = 0
updateCount = ()=> this.count +=1
render() {
return <div onClick={this.updateCount}>{this.count}</div>
}
}
Ignore the ugliness of the class, but how would i carry the count over into a functional component, with useRef?
The reason I ask is because in another class i am trying to convert, I have an async PromisePool running, that updates the downloaded variable each time a promise finishes, and when I tried to put downloaded into the state, it would always rerender the component and lose the data.
With useRef, you can create a variable which is not initialized on each re-render. The above component would look like
export default () => {
const count = useRef(0);
const updateCount = ()=> count.current +=1
render() {
return <div onClick={updateCount}>{count}</div>
}
}
However, you must know that updating a ref doesn't cause a re-render and hence updated value won't reflect in render
If you wish to trigger a re-render, make use of useState instead
export default () => {
const [count, setCount] = useState(0);
const updateCount = ()=> setCount(prevCount => prevCount + 1);
render() {
return <div onClick={updateCount}>{count}</div>
}
}
This is a direct example of moving the component over to a functional component. The count will remain in use as long as the component doesn't fully remount. It will remain even after re-renders.
export default function Counter(){
const [count,setCount] = useState(0);
return <div onClick={()=>setCount(count=>count+1)}>{count}</div>
}
Unless you are remounting this component by using a different key or changing the dom above it (i.e. adding a wrapping div after your promise finishes), then this should work fine (but in the instance of remounting, the class component would also reset it's counter).
You cannot carry the updated value of count with useRef since no rerender occurs when count is updated. useRef is for persisting an object in a component over multiple renders.
A possible solution for your PromisePools issue: Instead of converting the parent into a functional component, make use of the shouldComponentUpdate() lifecycle method in your class component to prevent a rerender of the child component when the state is changed.
Take a look at the lifecycle docs for more info:
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Related
I made a small experiment while learning React
https://codepen.io/bullet03/pen/abGoGvL?editors=0010:
React 17.0 with Fiber
2 components: Agregator(Parent) and Counter(Child)
Counter(Child) uses useState hook to change it's state
NB!!! Agregator(Parent) doesn't return JSX component, but calls Counter(Child) function. I know it's not casual way of using React, but this is the essence of the experiment
when click the button of Counter(Child) component we expect only Counter(Child) to be rerendered, but somehow Agregator(Parent) rerenders as well according to the console.log
Here comes the question: Why change of Counter(Child) component state causes Agregator(Parent) component rerender?
function Agregator() {
console.log("render Agregator");
return Counter();
}
function Counter() {
const [count, setCount] = React.useState(0);
const incCount = () => setCount((prev) => prev + 1);
console.log("render Counter", count);
return <button onClick={incCount}>{count}</button>;
}
ReactDOM.render(<Agregator />, document.getElementById("root"));
As far as I know, it shouldn't happen, because rerender of the component is caused by several cases:
change of state
change of props
change of context
forceUpdate
rerender of ancestor component
None of this is applicable to our case
NB!!! No need to rewrite this experiment to correct one, but it would be greate to get the explanation why in my case it works like this, so change of Child component state causes Parent component to rerender.
NB!!! Agregator(Parent) doesn't return JSX component, but calls Counter(Child) function. I know it's not casual way of using React, but this is the essence of the experiment
Then there's only one component at all, and no parent/child relationship, which renders (ha!) your experiment invalid.
Consider what would happen if you used your IDE's Inline Function feature on the Counter() invocation (which is essentially what the JS interpreter does, but with call stack and all that):
function Agregator() {
console.log("render Agregator");
// inlined...
const [count, setCount] = React.useState(0);
const incCount = () => setCount((prev) => prev + 1);
console.log("render Counter", count);
return <button onClick={incCount}>{count}</button>;
// ... end of inline.
}
ReactDOM.render(<Agregator />, document.getElementById("root"));
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'm dealing with a mix of function components and class components. Every time a click happens in the NavBar I want to trigger the function to validate the Form, it has 5 forms, so each time I'm going to have to set a new function inside the context API.
Context.js
import React, { createContext, useContext, useState } from "react";
const NavigationContext = createContext({});
const NavigationProvider = ({ children }) => {
const [valid, setValid] = useState(false);
const [checkForm, setCheckForm] = useState(null);
return (
<NavigationContext.Provider value={{ valid, setValid, checkForm, setCheckForm }}>
{children}
</NavigationContext.Provider>
);
};
const useNavigation = () => {
const context = useContext(NavigationContext);
if (!context) {
throw new Error("useNavigation must be used within a NavigationProvider");
}
return context;
};
export { NavigationProvider, useNavigation, NavigationContext};
Form.js
import React, { Component } from "react";
import { NavigationContext } from "../hooks/context";
class Something extends Component {
static contextType = NavigationContext;
onClickNext = () => {
// This is the funcion I want to set inside the Context API
if(true){
return true
}
return false;
};
render() {
const { setCheckForm } = this.context;
setCheckForm(() => () => console.log("Work FFS"));
return (
<>
<Button
onClick={this.onClickNext}
/>
</>
);
}
}
export default Something;
The problem when setting the function it throws this error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
And setting like setCheckForm(() => console.log("Work FFS"));, it triggers when rendered.
Render method of React.Component runs whenever state changes and setCheckForm updates the state whenever that render happens. This creates an infinite loop, this is the issue you are having there.
So, this is a lifecycle effect, you have to use that function inside componentDidMount if you want to set it when the component first loads.
While this solves your problem, I wouldn't suggest doing something like this. React's mental model is top to bottom, data flows from parent to child. So, in this case, you should know which component you are rendering from the parent component, and if you know which component to render, that means you already know that function which component is going to provide to you. So, while it is possible in your way, I don't think it is a correct and Reactish way to handle it; and it is probably prone to break.
In a class component when the state or props was changed the render method will execute, but I don't know in a functional component when the same happens which part of the code is rerendered?
If you have some expensive calculation inside your component that you want to skip, you can use the useMemo hook. It will do the calculation the first time, and then on subesequent times it will only recalculate if one of the dependencies change. For example:
import React, { useMemo } from 'react';
const Example = ({ people }) => {
const [ageFilter, ageFilter] = useState(10);
const filteredPeople = useMemo({
return people.filter(person => person.age >= ageFilter);
}, [people, ageFilter]);
return (
<div>
{filteredList.map(person=> (
// some components
))}
</div>
)
}
If your function component renders the same result given the same props, you can use React.memo. Similarly for class component React provides PureComponent.
It is mentioned in React doc:
If your function component renders the same result given the same
props, you can wrap it in a call to React.memo for a performance boost
in some cases by memoizing the result. This means that React will skip
rendering the component, and reuse the last rendered result.
So, you need to use React.memo.
According to that link: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
render() may be triggered with new props. Could someone give me a code example for that? I cannot see how props change invoke rendering! Please not by changing the props via the state; then it is setState() that invokes render()...
Look at shouldComponentUpdate() - this is it's signature - it returns a boolean. Props is there so you can compare and manually say whether the component should update.
shouldComponentUpdate(nextProps, nextState)
For function components React.memo is the replacement for shouldComponentUpdate which is used with class components.
const myComponent = React.memo(props => {
...
code of React.FunctionComponent
...
},
(prevProps, nextProps) => prevProps.propA === nextProps.propA
);
React.memo gets two arguments shown above: a React.FunctionComponent which will be wrapped around by memo and an optional function that returns a boolean.
When the function returns true, the component will not be re-rendered. If the function is omitted then its default implementation in React.memo works like the implementation of shouldComponentUpdate in React.PureComponent. E.g. it does shallow comparison of props, the difference is that only props are taken into account because state doesn’t exist for functional components.
Using hooks is neater to show. The new props data passed to ComponentB causes a re-rendering of ComponentB:
import React, { useState } from 'react'
import ComponentB from '...'
const ComponentA = props => {
const [data, setData] = useState(0) // data = 0
handleChangeProp = item => setData(item) // data = 1
return(
<div>
<button onClick{() => handleChangeProp(1)}
<ComponentB props={data} />
</div>
)
}
Yes, when you do a setState(newState) or when you pass in changed props the component will re render, this is why you can't mutate. The following will not work because you set state with mutated state.
export default function Parent() {
const [c, setC] = useState({ c: 0 });
console.log('in render:', c);
return (
<div>
<button
onClick={() =>
setC(state => {
state.c++;
console.log('state is:', state);
return state;
})
}
>
+
</button>
<Child c={c.c} />
</div>
);
}
That code "won't work" because pressing + will not cause a re render, you mutated state and then set state with the same object reference so React doesn't know you changed anything.
This is how React detects changes, you may think that comparing {c:0} to {c:1} is a change but because you mutated there actually is no change:
const a = {c:1};
a.c++;//you "changed" a but a still is a
To indicate a change in React you have to create a new reference:
const a = {c:1};
const b = {...a};//b is shallow copy of a
a===b;//this is false, even though both a and b have same internal values
This means you can also have unintended renders because you create an object prop that may have the same value but still is a different reference than the last time you created it.
Note that even <Child prop={1} will cause Child to render if Child is not a pure component (see links at the end).
What you want to avoid is doing <Child prop={{c:value}} because every time you pass prop it'll force Child to render and React to do a virtual DOM compare even if value didn't change. The virtual DOM compare will probably still detect that Child virtual DOM is the same as last time and won't do an actual DOM update.
The most expensive thing you can do is <Child onEvent={()=>someAction(value)}. This is because now the virtual DOM compare will fail even if value and someAction did't change. That's because you create a new function every time.
Usually you want to memoize creating props in a container, here is an example of doing this with react-redux hooks. Here is an example with stateful components passing handlers.