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

sophiebits

const {useCallback, useEffect, useReducer, useRef} = require('react');

let effectCapture = null;

exports.useReducerWithEmitEffect = function(reducer, initialArg, init) {
  let updateCounter = useRef(0);
  let wrappedReducer = useCallback(function(oldWrappedState, action) {
    effectCapture = [];
    try {
      let newState = reducer(oldWrappedState.state, action.action);

artyomtrityak

enum DROPDOWNS {
  REPORT = "REPORT",
  USER = "USER"
}

type IDropdowns = keyof typeof DROPDOWNS | null;

type IUseDropdown = [
  RefObject<HTMLInputElement>,
  IDropdowns,

artyomtrityak

import React, { useState, useRef, useEffect, RefObject } from "react";

enum DROPDOWNS {
  REPORT = "REPORT",
  USER = "USER"
}

type IDropdowns = keyof typeof DROPDOWNS | null;

type IUseDropdown = [

james-jhang

Record Chrome screen by ffmpeg.

Commands

The command below can record screen video by ffmpeg on Windows.

ffmpeg -y -rtbufsize 100M -f gdigrab -framerate 30 -probesize 10M -draw_mouse 1 -i title="Task Manager" -c:v libx264 -r 30 -preset ultrafast -tune zerolatency -crf 25 -pix_fmt yuv420p "video output.mp4"

freetonik

Привет,

В начале 2018 года Максим Шайхалов (https://twitter.com/p1xe1) предложил разработать и разместить на Хекслете несколько курсов по дизайну, пользовательскому опыту и интерфейсам. Первым в списке был курс «Введение в проектирование интерфейсов». После обсуждения планов и содержания курсов, в апреле Максим подготовил первые несколько уроков первого курса, а я прочитал и опубликовал их по адресу https://ru.hexlet.io/courses/intro-to-ux

Спустя несколько недель Антон Жиянов (https://twitter.com/nalgeon/) написал в Твиттере https://twitter.com/nalgeon/status/984039364111093760 о том, что уроки в курсе Максима повторяют email-курс «Дизайн интерфейсов для нормальных людей» (https://dangry.ru/jan/), созданный Антоном Жияновым и Ольгой Коноваловой. Максим ответил https://twitter.com/p1xe1/status/984100766674808834 Антону, а также описал ситуацию и свою позицию мне в личной переписке.

Примеры Антона (https://twitter.com/nalgeon/status/984111609084825601) явно показывают его правоту. Сомнений нет: тексты Максим

berkedel

How to solve dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.60.dylib

brew uninstall --ignore-dependencies node icu4c
brew install node

trueadm

const React = require("react");

const Lifecycles = React.createLifecycleEvents({
  didMount({ setState }) {
    setState({
      disabled: false,
    });
  },
  didUpdate({ inputRef }) {
    if (document.activeElement !== inputRef.value) {

TheLarkInn

const chalk = require("chalk");
const { performance } = require("perf_hooks");
class ProfilingPlugin {
  apply(compiler) {
    // Compiler Hooks
    Object.keys(compiler.hooks).forEach(hookName => {
      compiler.hooks[hookName].intercept(makeInterceptorFor("Compiler")(hookName))
    });

    Object.keys(compiler.resolverFactory.hooks).forEach(hookName => {

prog

build:install-vendor:
  stage: build
  image: <any-image-with-composer>
  before_script:
  - composer config -g cache-dir "$(pwd)/.composer-cache"
  script:
  - composer install --ignore-platform-reqs --no-dev --optimize-autoloader --no-ansi --no-interaction --no-progress
  cache:
    paths:
    - .composer-cache/