https://unicorn-utterances.com/posts/functions-are-killing-react-performance#render-functions
Categories
Category: React
Categories
React Router
V5 Dynamic Routing Routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. Primary Components <BrowserRouter> A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL. Container of other <Route>s. <Route> Its most basic responsibility is to render some […]
Categories
Controlled and uncontrolled components
Introduction Uncontrolled component: self-control controlled component: parent component passes in value and handles change Example 1: A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML. A Controlled Component is one that takes its current […]
Categories
Refresh/Reload Page
Reload Refresh Refs Refresh method
Categories
React Rendering
It Always Re-renders By default, when the state of the component changes, this component and all its children re-render. But React updates a text node only when there’s visual change. “Rendering” of react component is not the same with “updating the DOM”. How to Prevent Re-renders memo() Wrapping a component with memo prevents the entire subtree of this component […]
Categories
[Hook] useState
Overview This is a way to “preserve” some values between the function calls Normally, variables “disappear” when the function exits but state variables are preserved by React The state is only created the first time our component renders. During the next renders, useState gives us the current state. State variables can hold objects and arrays too. Update […]
Categories
[Hook] – useEffect
Pure Function VS Side Effect The same input, it will always return the same output Predictable, reliable, and easy to test Side effects are not predictable because they are actions which are performed with the “outside world.” Making a request to an API for data from a backend server To interact with browser APIs (that is, to use document or window directly) […]
https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro Cause: An input field will become uncontrolled when the initial value is undefined Solution:
Categories
React – The Complete Guide – Udemy
Section 1: Getting Started React is a JavaScript library for building user interfaces A client-side JavaScript library All about building modern, reactive user interfaces for the web Declarative, component focused approach React.js Alternatives Section 2: JavaScript Refresher declare variable let -> variable values const -> constant values Arrow functions keep it context (this issue) parentheses […]
Forms Elements in HTML forms maintain their own state and update according to input Controlled Components A React component controls the form it renders Single source Tie the form state to component state State mutation has an associated handler function Form Validation Uncontrolled Components Handle the form data by the DOM itself Instead event handle […]
