Heo

Simple, elegant React hooks state management solution

The project address

• React Hooks Works with React Hooks components
• Focus on the performance Reduce extra rerender and run smoothly
• 1KB min+gz
• Without relying on React is used only, with no reliance on third-party libraries
• simple React Hooks are what you need
• TypeScript write Complete type hints, easy to write code
• Easy to integrate It can be introduced incrementally to coexist with other state management
• general Components, modules, applications, and server-side rendering
• flexible Easily combine providers based on Context
• Easily migrate It is created based on custom Hooks

The installation

npm install --save heo
Copy the code

Example

import React from 'react';
import { createContainer, useMethods } from 'heo';

function useCounter() {
  const [count, setCount] = React.useState(0);

  const methods = useMethods({
    increment() {
      setCount(count + 1);
    },
    decrement() {
      setCount(count - 1); }});return {
    count,
    methods,
  };
}

const CounterContainer = createContainer(useCounter);

function CounterDisplay() {
  const { count, methods } = CounterContainer.usePicker(['count'.'methods']);

  return (
    <div>
      {count}
      <button type="button" onClick={methods.increment}>
        ADD
      </button>
      <button type="button" onClick={methods.decrement}>
        MINUS
      </button>
    </div>
  );
}

function App() {
  return (
    <CounterContainer.Provider>
      <CounterDisplay />
    </CounterContainer.Provider>
  );
}

render(<App />.document.getElementById('root'));
Copy the code

API

createContainer(useHook)

import { createContainer, useFunction } from 'heo';

function useCustomHook() {
  const [value, setInput] = useState();
  const onChange = useFunction((e) = > setValue(e.currentTarget.value));
  return {
    value,
    onChange,
  };
}

const Container = createContainer(useCustomHook);
// Container === { Provider, usePicker }
Copy the code

<Container.Provider>

function ParentComponent() {
  return (
    <Container.Provider>
      <ChildComponent />
    </Container.Provider>
  );
}
Copy the code

<Container.Provider initialState>

function useCustomHook(initialState = ' ') {
  const [value, setValue] = useState(initialState);
  // ...
}

function ParentComponent() {
  return (
    <Container.Provider initialState="value">
      <ChildComponent />
    </Container.Provider>
  );
}
Copy the code

Container.useSelector()

Listen for selected values in the current container, and rerender is fired if the values change

function ChildComponent() {
  const value = Container.useSelector((state) = > state.value);
  return <span>{value}</span>;
}
Copy the code

Container.usePicker()

UseSelector syntax sugar, more commonly written

function ChildComponent() {
  const { value } = Container.usePicker(['value']);
  return <span>{value}</span>;
}
Copy the code

Container.withPicker()

Higher-order component form of usePicker

function ChildComponent({ value }) {
  return <span>{value}</span>;
}

Container.withPicker(ChildComponent, ['value']);
Copy the code

useMethods & useFunction

Persist a Hook for a function.

You might need ituseCallbackRemember a callback, but since the internal function must be recreated frequently, memory is poor, causing the child component to repeat render. For complex subcomponents, rerendering can have an impact on performance. throughuseMethods, which guarantees that the function address will never change.

Performance tip

Heo was inspired by unstoritiate-Next and solved the performance problem of context penetration caused by unSToritiate-Next without excessive abstract composition and optimization of components. Performance is extremely important in large modules/projects and can save us a lot of tuning time.

Export member memorization

In React Hooks, setState re-executes the current function, rerender, each time. Under this feature, the component’s internal functions are also recreated with rerender, expressions are re-executed, and useMemo and useCallBack exist as a result.

Heo also has the same memory properties as React. In the useCounter return value below, the function requires a useMethods wrap for memorization. A note of caution: do not export mutable objects that are recreated with each render. Heo doesn’t need to be optimized. All the optimizations you do are standard React optimizations.

function useCounter() {
  const [count, setCount] = React.useState(0);

  const methods = useMethods({
    increment() {
      setCount(count + 1);
    },
    decrement() {
      setCount(count - 1);
    },
    handleClick() {
      // This can be called
      this.increment();
      // ...}});return {
    count,
    methods,
  };
}

const Counter = createContainer(useCounter);
Copy the code

• We are very happy that the React state management plug-in has been approved by others. There will be another one soon. I am drafting a document to use it with HEO, which is perfectly compatible with TS type
• The project addressThank you all star, mention issue, embrace open source!

portal

• Technical exchange group

• This year interviewed 100+ front-end classmates my summary

• Why do I insist on getting up at six

• I read the technical book is very anxious, can not read the book how to do?

• Hard work === “volume”?

• Vite + React + TS

• Vite + React + TS