5,350
edits
React (JavaScript library): Difference between revisions
→State
No edit summary |
(→State) |
||
| Line 9: | Line 9: | ||
https://beta.reactjs.org/learn/managing-state | https://beta.reactjs.org/learn/managing-state | ||
State can be managed in several ways: | State can be managed in several ways: | ||
* <code>useState</code> allows you to define a state variable, similar to a class property, which will trigger a rerender. | * [https://beta.reactjs.org/reference/react/useState <code>useState</code>] allows you to define a state variable, similar to a class property, which will trigger a rerender. | ||
* <code>useReducer</code> allows you to refractor state manipulation to a separate ''reducer'' function outside of your component. | * [https://beta.reactjs.org/reference/react/useReducer <code>useReducer</code>] allows you to refractor state manipulation to a separate ''reducer'' function outside of your component. | ||
* <code>useEffect</code> allows you to setup and remove listeners. These always run on the client in SSR variants of React. | * [https://beta.reactjs.org/reference/react/useEffect <code>useEffect</code>] allows you to setup and remove listeners. These always run on the client in SSR variants of React. | ||
* Contexts | * Contexts | ||
* [https://beta.reactjs.org/reference/react/useRef#useref <code>useRef</code>] returns a reference to an object with a <code>current</code> parameter which allows you to have state without rerendering. | * [https://beta.reactjs.org/reference/react/useRef#useref <code>useRef</code>] returns a reference to an object with a <code>current</code> parameter which allows you to have state without rerendering. | ||
| Line 21: | Line 21: | ||
Note that the state of the function is tied to their position in the React virtual dom. | Note that the state of the function is tied to their position in the React virtual dom. | ||
A single component rendered multiple times will have different state. | A single component rendered multiple times will have different state. | ||
==Frameworks== | ==Frameworks== | ||