React (JavaScript library): Difference between revisions
No edit summary |
|||
| 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== | ||
Revision as of 03:31, 8 February 2023
Components
React has two types of components: class components (those which extend React.Component) and function components. Function components are lighter weight than class components and should be preferred for new code.
Function components
State
https://beta.reactjs.org/learn/managing-state State can be managed in several ways:
useStateallows you to define a state variable, similar to a class property, which will trigger a rerender.useReducerallows you to refractor state manipulation to a separate reducer function outside of your component.useEffectallows you to setup and remove listeners. These always run on the client in SSR variants of React.- Contexts
useRefreturns a reference to an object with acurrentparameter which allows you to have state without rerendering.
Every time any properties or state changes, your function component will be rerendered.
Therefore, you cannot rely on local variables to hold their state.
Additionally, you must call useState identically across renders (i.e. not conditionally), ideally near the top of your function.
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.
Frameworks
Next.js
Next.js allows you to use React with server-side rendering.