jwt token

содержит:
- header
- payload
- signature

header & payload — обычные json-объекты, их нужно закодировать через base64url

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

реакт компонент перерендеривает своих детей если перерендеривается сам

pure-компонент перерендеривается только если у него изменились пропсы

отключить error overlay можно добавлением в webpack.dev.js:

  devServer: {
    client: {
      overlay: false,
    },

conditional props версия 2 (в этот раз у меня заработало)

interface CommonProps {
  children?: React.ReactNode

  // ...other props that always exist
}

type ConditionalProps =
  | {
      icon?: JSX.Element;
      src?: never;
    }
  | {
      icon?: never;
      src?: string;
    };

type Props = CommonProps & ConditionalProps  

https://dev.to/maissenayed/conditional-react-props-with-typescript-43lg

3 way merge editor in vs code can be turned off by git.mergeEditor: false in settings.json

https://stackoverflow.com/a/73277865/11043392

рисовалка про которую я постоянно забываю

https://excalidraw.com

узнала сегодня про Reflect object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect

неоч понятно зачем он нужен, встретила в контексте работы с прокси

const person = {
    name: "Julia",
    age: 30
}

const personProxy = new Proxy(person, {
    get: (obj, prop) => {
        console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`)
    },
    set: (obj, prop, value) => {
        console.log(`Changed ${prop} to ${value}`)
        return Reflect.set(obj, prop, value)
    }
})

новые (для меня) хуки в реакте


useImperativeHandle — позволяет прокинуть коллбэк/объект со стейтом в родительский компонент через реф

useDebugValue — вешает лейбл на кастомный хук в реакт-девтулзах

useId — генерит id

useDebugValue

я просто оставлю это здесь

export const usePreviousPersistent = <TValue extends unknown>(
  value: TValue
) => {
  const ref = useRef<{ value: TValue; prev: TValue | null }>({
    value: value,
    prev: null
  });

  const current = ref.current.value;

  if (!isEqual(value, current)) {
    ref.current = {
      value: value,
      prev: current
    };
  }

  return ref.current.prev;
};

https://www.developerway.com/posts/implementing-advanced-use-previous-hook

when React components re-render:
• when component's state changed
• when parent component re-renders
• when a component uses context and the value of its provider changes

не очень верится

что же такое каскад в цсс

https://web.dev/learn/css/the-cascade/