oreqizer

import React, { PureComponent, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { List } from 'immutable';

import TodoItem from './TodoItem';
import TodosForm from './TodosForm';
import todosSelector from './todosSelector';

import * as todoActions from '../../../universal/modules/todo/todoDuck';

oreqizer

import React, { PropTypes, PureComponent } from 'react';

import Todo from '../../../universal/containers/Todo';


const doneStyle = {
  textDecoration: 'line-through',
};

const notDoneStyle = {

oreqizer

import React from 'react';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';

import messages from './messages';

const TodoList = props => (
  <div className="TodoList">
    <h3>{props.intl.formatMessage(message.listHeader)}</h3>
    {props.todos.map(todo => (

oreqizer

// @flow
import React from 'react';

import Todo from '../containers/Todo';

type Props = {
  header: string,
  todos: Todo[],
}

oreqizer

// WRONG!
// Always use a class/memoization for partial application
// and keep props flat, or implement 'shouldComponentUpdate'.
import React from 'react';

import CountryIcon from './CountryIcon';
import Box from './Box';

const BadTodo = props => (
  <Box onClick={() => props.onClick(props.todo.id)}>

oreqizer

import React, { PureComponent } from 'react';

import CountryIcon from './CountryIcon';
import Box from './Box';

export default class TurboTodo extends PureComponent {
  handleClick = () => {
    const { todo, onClick } = this.props;
    
    onClick(todo.id);

oreqizer

// ... code
shouldComponentUpdate(nextProps) {
  const { geo, ...rest } = this.props;
   
  const geoOk = geo.lat === nextProps.geo.lat && geo.lon === nextProps.geo.lon;
  return !(geoOk && Object.keys(rest)
    .reduce((acc, key) => acc && rest[key] === nextProps[key], true));
}
// ... code

oreqizer

import React, { PureComponent } from 'react';

import CountryIcon from './CountryIcon';
import Box from './Box';

export default class TurboTodo extends PureComponent {
  constructor(props) {
    super(props);
    
    this.geo = { lat: props.lat, lon: props.lon };

oreqizer

import React, { Component } from 'react';

const FnComponent = props => (
  // ...your JSX
);

class ClassComponent extends Component {
  // ...lifecycle hooks
  
  // ...handlers

oreqizer

import { createSelector } from 'reselect';

// sub-selectors
const allTodoSelector = state => state.todo.todos;  // an array of todos
const filterSelector = (_, props) => props.params.filter;  // a url parameter

// a selector
const todoSelector = createSelector(
  [allTodoSelector, filterSelector],
  (todos, filter = 'all') => {