Category: React

https://unicorn-utterances.com/posts/functions-are-killing-react-performance#render-functions

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 […]

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 […]

Reload Refresh Refs Refresh method

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 […]

Overview Update Array State Update Object State Callback for useState Refs https://reactjs.org/docs/hooks-state.html https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate https://stackoverflow.com/a/56394177

Pure Function VS Side Effect useEffect How do I use useEffect? The function passed to useEffect is a callback function. This will be called after the component renders. The second argument is an array, called the dependencies array. This array should include all of the values that our side effect relies upon. Common mistakes Cleanup […]

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 […]