alexeyraspopov

function generateId() {
  return Math.random().toString(32).substr(2, 8);
}

alexeyraspopov

import { useState, useCallback } from 'react';

let defaultHandler = {
  read(defaults) {
    return getInitialParams(defaults, window.location.search);
  },
  write(state) {
    let params = getUpdatedParams(state);
    window.history.pushState(null, null, '?' + params.toString());
  },

alexeyraspopov

/**
 * Usage
 *   function Base() {}
 *   Base.prototype. // anything
 *
 *   let Child = Base.extend({ prototype }, { static });
 *   let instance = new Child();
 */
function extend(props, statics) {
  let parent = this;

alexeyraspopov

Data Injection

Задача: компоненту необходимо получить сторонние данные, которые он не может получить через пропсы.

Проблема: разные источники данных могут иметь разные API, которые влекут за собой необходимость реализации дополнительных аспектов в рамках компонента: useState/useEffect, обработка loading state, доступ к асинхронным API, etc.

Решение: Каждый раз когда компоненту нужны сторонние данные, создавай

alexeyraspopov

function useInterval(callback, delay) {
  let handler = useRef(callback);
  
  useEffect(() => {
    handler.current = callback;
  }, [callback]);
  
  useEffect(() => {
    let timer = setInterval(() => handler.current(), delay);
    return () => clearInterval(timer);

alexeyraspopov

Given a function component

export default function MyComponent({ value }) {
  return (
    <div>
      <p>{value}</p>
    </div>
  );
}

alexeyraspopov

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  static get defaultProps() {
    return { fallback: null, onError: () => null };
  }

alexeyraspopov

Assuming we have a state identity and state reducer

let resourceIdentity = Map();

function resourceReducer(state, action) {
  switch (action) {
    // ...
    default:
      return state;

alexeyraspopov

function useDebouncedValue(value, delay) {
  let [debounced, setDebounced] = useState(value);
  useEffect(() => {
    let timer = setTimeout(setDebounced, delay, value);
    return () => clearTimeout(timer);
  }, [delay, value]);
  return debounced;
}

alexeyraspopov

export function scaleTicks(start, stop, count) {
  let step = tickIncrement(start, stop, count);
  if (step > 0) {
    let t0 = Math.ceil(start / step);
    let t1 = Math.floor(stop / step);
    let ticks = new Array(Math.ceil(t1 - t0 + 1));
    return Array.from(ticks, (_, i) => (t0 + i) * step);
  } else {
    let t0 = Math.floor(start * step);
    let t1 = Math.ceil(stop * step);