Прикольно. Вот нельзя сразу так было сделать, а не в реакт это пихать?)

Ну эт не оч оптимально

Вроде

Ну просто что бы апи опробывать...

Хотели хайпа

Ребята

Но вообще норм апи

Не, вообще сейчас я думаю что мне нравится. Выглядит как магия и делает тоже, но при этом очень просто.

Надо пробовать....

там аустайд клик так изи

// hook 
function useOutsideClick(event, cb) {
  const ref = useRef(null);
  useEffect(() => {
    function handleClickOutside(e) {
      if ((!ref.current || !ref.current.contains(e.target)) && cb) {
        cb(e);
      }
    }
    document.addEventListener(event, handleClickOutside, true);
    return () => document.removeEventListener(event, handleClickOutside, true);
  }, []);
  return ref;
}

// hoc
export const enhanceWithClickOutside = params => Component => {
  const componentName = Component.displayName || Component.name;

  class EnhancedComponent extends React.Component {
    __domNode;
    __wrappedInstance;

    constructor(props) {
      super(props);
      this.handleClickOutside = this.handleClickOutside.bind(this);
    }

    componentDidMount() {}

    componentWillUnmount() {
      document.removeEventListener(params.event, this.handleClickOutside, true);
    }

    handleClickOutside(e) {
      const domNode = this.__domNode;
      if (
        (!domNode || !domNode.contains(e.target)) &&
        this.__wrappedInstance &&
        typeof this.__wrappedInstance.handleClickOutside === "function"
      ) {
        this.__wrappedInstance.handleClickOutside(e);
      }
    }

    render() {
      const { wrappedRef, ...rest } = this.props;

      return (
        <Component
          {...rest}
          ref={c => {
            this.__wrappedInstance = c;
            this.__domNode = ReactDOM.findDOMNode(c);
            wrappedRef && wrappedRef(c);
          }}
        />
      );
    }
  }

  EnhancedComponent.displayName = `clickOutside(${componentName})`;

  return hoistNonReactStatic(EnhancedComponent, Component);
};

Апи самое магическое, что я видел.

Я вроде разобрался как работает

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

Но вообще, вот если подумать, с хуками ты совсем не думаешь о реактивности, хотя у тебя прям вот все ей пропитано. Т.е. ты реально просто используешь функции и данные

Но вот интересно что там по потреблению памяти у всего этого дела...

Это многих пугает, в твитере дену много гневных сообщений написали

Покажи? Так то я не замерял, вдруг там все не плохо...

Что то потерял, но где то ему писали про кучу создаваемых постоянно функций

А че так можно было

Lol