Object.keys preserves key order. I’ve never (will never) depend on, but good to know …

  • However, this breaks down in one situation: if you have two sets of children that you need to reorder, there’s no way to put a key on each set without adding a wrapper element.
  • That is, if you have a component such as: – – The children will unmount and remount as you change the prop because there aren’t any keys marked on the two sets of children.
  • To solve this problem, you can use the add-on to give keys to the sets of children.
  • Instead of creating arrays, we write: – – The keys of the passed object (that is, and ) are used as keys for the entire set of children, and the order of the object’s keys is used to determine the order of the rendered children.
  • Note also that we’re relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.

In most cases, you can use the key prop to specify keys on the elements you’re returning from render. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there’s no way to put a key on each set without adding a wrapper element.
Continue reading “Object.keys preserves key order. I’ve never (will never) depend on, but good to know
…”

Reacting fast — OutSystems Engineering — Medium

Why we chose #Reactjs despite #Angularjs’s popularity, good one by @joaomiguelneves 🤔 👏

  • Components virtualization allows us to render only what’s visible in the viewport, giving OutSystems applications the desired native like performance.
  • Skipping the rendering of a component will also skip the rendering of its descendants resulting in a performance shortcut.
  • In the example we have a Component ( WidgetWithExpensiveRender ) that is able to receive any other component and render it.
  • When you have a list of components, React will complain (using the Development version) if you don’t add keys to the child components of a list.
  • React performance tools helps you identify which components take longer to render and find good candidates to have a shouldComponentUpdate implementation.

Read the full article, click here.


@OpenCoconut: “Why we chose #Reactjs despite #Angularjs’s popularity, good one by @joaomiguelneves 🤔 👏”


In the fall of 2014 we started developing version 10 of the OutSystems platform. In the beginning we did several POCs to evaluate the…


Reacting fast — OutSystems Engineering — Medium