170 Matching Annotations
  1. May 2019
  2. Apr 2019
  3. Mar 2019
    1. React doesn’t need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don’t happen during rendering. So if they throw, React still knows what to display on the screen.

      key point. since event handlers are async by nature, they are on a different 'job' (in the browser queue) and therefore even if crashing - the render cycle is not touched.

    2. As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree

      key point

    3. Error boundaries work like a JavaScript catch {} block, but for components

      key point about the usage style of error boundaries

    4. Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components.

      a good example for justification to use uncontrolled components

    5. an uncontrolled component keeps the source of truth in the DOM

      key point

    6. In a controlled component, form data is handled by a React component

      key point

    7. Two elements of different types will produce different trees. The developer can hint at which child elements may be stable across different renders with a key prop.

      key point: this is the algorithm React uses to detect changes

    8. React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”, but it works the same way on React Native.

      This is another definition/description for virtual DOM

    9. Note that a HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.

      key point

    10. accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.

      to make a long story short - consider a FancyButton component that actually wraps a native button element. Sometimes, the internal element - button - needs to be accessed from a client of FancyButton (such as to manage focus etc). This feature allows this. Handle with care - encapsulation is good and desired. Don't break it without careful thought!

    11. Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

      key point

    12. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language

      key point

    13. The dynamic import() syntax is a ECMAScript (JavaScript) proposal not currently part of the language standard. It is expected to be accepted in the near future.

      this mean, folks, that if you need to support IE - forget about import()... :-(

    14. If you can’t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

      see also dumb/smart components (it has another name for this)

    15. Simply ask three questions about each piece of data: Is it passed in from a parent via props? If so, it probably isn’t state. Does it remain unchanged over time? If so, it probably isn’t state. Can you compute it based on any other state or props in your component? If so, it isn’t state.

      determining if the data should be 'state' or not

    16. A good rule of thumb is that elements inside the map() call need keys.

      key point. see above that the key is needed in the immediate child level in the array.map() usage, not its own child within... (see just above...)

    17. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort: const todoItems = todos.map((todo, index) =>

      the 'index' is a part of map() function

    18. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

      meaning, the key should be given to the element being iterated over

    19. In JavaScript, class methods are not bound by default

      key point and i highly recommend those not familiar with what 'this' is in JS and how it is determined to have a quick visit on guide on the internet. I recommend an online course, which is very good IMHO, but its a paid one (and covers much more than 'this' explanation)

    20. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. For example, this code may fail to update the counter: // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument: // Correct this.setState((state, props) => ({ counter: state.counter + props.increment }));

      key point!

    21. By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

      key point on security concerns

    22. We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.

      key point.

    23. Using the array index as a key is problematic when trying to re-order a list’s items or inserting/removing list items. Explicitly passing key={i} silences the warning but has the same problems as array indices and is not recommended in most cases

      !

    24. Avoiding direct data mutation lets us keep previous versions of the game’s history intact, and reuse them later

      one need/reasoning why data immutability is good/useful

    25. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The <div /> syntax is transformed at build time to React.createElement('div')

      This is a key point. Its not mandatory to use JSX. One can use React.createElement() instead...

    1. test()

      Jest documentation speaks in 'test()' so I guess its better to go with this official syntax. 'it()' is an older syntax shared with other testing systems

    1. You can also add other assets to the public folder. Note that we normally encourage you to import assets in JavaScript files instead. For example, see the sections on adding a stylesheet and adding images and fonts. This mechanism provides a number of benefits: Scripts and stylesheets get minified and bundled together to avoid extra network requests. Missing files cause compilation errors instead of 404 errors for your users. Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

      great summary of why the import() in JS is better than manually handling all those

    1. To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path

      nice - powerful!

  4. Jan 2019
  5. Dec 2018
  6. Nov 2018
  7. Oct 2018
    1. React is fast, thanks to the VirtualDOM. Using a diffing algorithm, the browser DOM nodes are manipulated only when there is a state change. This algorithm is computationally expensive. Using webworkers to perform the calculations can make React even faster.
  8. Sep 2018
  9. Sep 2017
  10. Jun 2017
    1. If you access through http://localhost:8080/webpack-dev-server/, WDS provides status information at the top. If your application relies on WebSockets and you use WDS proxying, you need to use this particular url as otherwise WDS logic interferes.

      IMPORTANT CAVEAT - If using Websockets and WDS proxying take note!

    2. HMR allows patching the browser state without a full refresh making it particularly handy with libraries like React where a refresh blows away the application state. The Hot Module Replacement appendix covers the feature in detail.

      Why you should prefer hot module replacement in a React development context: a full refresh, the kind your standard webpack-dev-server defaults to, will obliterate application state in React!

  11. May 2017