Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to solve the problem of changing the value of usestate in react without rendering". In the daily operation, I believe that many people have doubts about how to solve the problem of changing the value of usestate without rendering in react. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to solve the problem of changing the value of usestate in react." Next, please follow the editor to study!

Methods: 1, use "const [arr, setArr] = useState ([change value])" to modify the state value; 2, create a new array, and assign the value of the original array to the new array, and modify the State with "setState (new array)" to change the address pointed to by the original array in the stack.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What if usestate changes the value and does not render in react?

Shallow listening is the default in React. When the state value is an object, the reference (address) of the object is stored in the stack, and the data in the heap is changed by setState.

Therefore, after setArr (arr), the address in the stack is still the original address, and the React shallow monitor hears that the address has not changed, so it will think that State has not changed, so it does not re-render the page.

Solve

Idea: just change the address pointed to by the original arr in the stack

Examples are as follows:

1) Direct setState (the value to be modified)

Const [arr, setArr] = useState ([]) setArr (1)

2) create a new array newArr, assign the value of the original array to the new array, and setState (newArr)

Const [arr, setArr] = useState ([]) const newArr = arr.slice (1) setArr (newArr)

Using the expander of ES6

Const [arr, setArr] = useState ([]) setArr ([... arr]). At this point, the study on "how to solve the problem of changing the value of usestate in react without rendering" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.