React (JavaScript library): Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
+==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:
+* <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.
+* <code>useEffect</code> allows you to setup and remove listeners. These always run on the client in SSR variants of React.
+* 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.
+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 <code>useState</code> 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==