slikts

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

thejmazz

// thanks sleepycat https://github.com/sleepycat/mapboxgl-webpack-example

import mapboxgl from 'mapbox-gl'

mapboxgl.accessToken = 'pk.eyJ1IjoibWlrZXdpbGxpYW1zb24iLCJhIjoibzRCYUlGSSJ9.QGvlt6Opm5futGhE5i-1kw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom

iant

# Run from 'rails console'
# Example cookie value. To find in Chrome: Inspect > Resources > Cookies
cookie = "cEJPOHAwUXdmMS9HK3gyVVYyNVR2QU03Q0ZhclZYNmRrN3RoelhrenQ3ZVhsSEtOTytQR29aZG1ZZWZmK254Y01QM2hyTVZMNlFOcWNCRytzM0pac0hpbFVWTUoxZEVicEZERXIzbEJENkJ4QVBZcDQyM24rclQxbnRFeXpkMVRicTdGMkVSU2F1U0FVcEdiYVBsRVFveThlMndPdDBlaThVVkl4TkFreUc0PS0tRFFmdlFzQnkrSmROT1ZNdnpjcnA4Zz09--3bf330ec809351525bd9df2c905a81a3bcc93c81"
# Example secret_key_base found in config/secrets.yml
secret_key_base = "df3def2698eb651febcb5ca64c3203a3cb3ff988e7ee5c4fd66135a24ddf5009ae0f95dee1e1d2e443538e647178f0cd87acc98d1082659bb03d89b8af1f2252"
key_generator = ActiveSupport::KeyGenerator.new(secret_key_base, iterations: 1000) 
secret = key_generator.generate_key("encrypted cookie")
sign_secret = key_generator.generate_key("signed encrypted cookie")
encryptor = ActiveSupport::MessageEncryptor.new(secret, sign_secret, serializer: ActiveSupport::MessageEncryptor::NullSerializer)
puts encryptor.decrypt_and_verify(URI.unescape(cookie))

djonsson

What is this?

Following this guide will set up a local Elasticsearch with Kibana and Marvel using Homebrew and Homebrew Cask

Prerequisites

If you already have Java installed on your system, skip steps Install Cask and Install Java

If you already have Java and Homebrew installed on your system, skip steps Prerequisites, start at Install Elasticsearch and Kibana after running $ brew update

Install Homebrew

• $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

gigamonkey

Write a program that does what it’s supposed to do
Write idiomatic code
Debug a program that you wrote
Debug a program someone else wrote
Debug the interaction between a system you wrote and one you didn’t
File a good bug report
Modify a program you didn’t write
Test a program you wrote
Test a program you didn’t write
Learn a new programming language

nhagen

var a = ["sdfdf", "http://oooooolol"],
    handleNetErr = function(e) { return e };

Promise.all(fetch('sdfdsf').catch(handleNetErr), fetch('http://invalidurl').catch(handleNetErr))
    .then(function(sdf, invalid) {
        console.log(sdf, invalid) // [Response, TypeError]
    })
    .catch(function(err) {
        console.log(err);
    })

chantastic

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

jquense

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

josephspurrier

/*
********************************************************************************
Golang - Asterisk and Ampersand Cheatsheet
********************************************************************************

Also available at: https://play.golang.org/p/lNpnS9j1ma

Allowed:
--------
p := Person{"Steve", 28} 	stores the value