Шаблоны проектирования в React

Из личного опыта:
1. Передачу свойств (лифтинг) использую для дечерних компонентов, когда есть родительский компонент в который приходят реальные данные от instance.

<Grid>{rows.map(row => <Row title={row.title}/>)}</Grid>

.
Тут же полезна деструктуризация обьекта и функциональное описание (примеры в статье), так как компонеты не использующие методов жизненного цикла можно нужно писать именно как функции (быстрее рендерятся, читабельней, меньше кода).

2. С провайдером очень просто. Наиболее частое использование — для страниц роутера. когда в центральный роутер рендерятся компоненты относительно текущего location

class SampleComp extends Component {
    render() {
      return <div>...</div>;
    }
};
const mapStateToProps = state => {
   return {
      prop: state.prop
   }
}
const mapDispatchToProps = dispatch => ({});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SampleComp));

или же просто, если компонент враппер принимает слишком много параметров, которые в последствии пропихиваются вглуб дочерних, проще разделить.

3. render props — хороший прием, скажем, если в гриде нужно разные кастомизированые типы елементов (<Avatar/>, возможно <Avatar/> + name + surName… etc) и не хочется замусоривать базовый компонент <Grid/> набором непонятно каких стилей или пропсов… тогда проще создать функцию которая принимает весь row или же целевой value

return <div>{ formatter ? formatter(row, row[keyName]) : row[keyName] || '—' }</div>

а функция колбек может быть описана очень либерально

formatter: (row, value) => <Avatar firstName={value} url={row.authorAvatarUrl}/>

В чём разница между React и Vue?

Да вот даже так…

{ !!errors.length && <ul className="mme-input__error">...</ul> }