diff --git a/.dumirc.ts b/.dumirc.ts
index 6d269dd..72baed9 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 
 export default defineConfig({
   themeConfig: {
-    name: 'Align',
+    name: 'Context',
   },
   mfsu: false,
 });
\ No newline at end of file
diff --git a/HISTORY.md b/HISTORY.md
deleted file mode 100644
index 383ae19..0000000
--- a/HISTORY.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# History
-----
-
-## 2.4.0 / 2018-06-04
-
-- support point align
-
-## 2.3.4 / 2017-04-17
-
-- fix `createClass` and `PropTypes` warning.
-
-## 2.3.0 / 2016-05-26
-
-- add forceAlign method
diff --git a/docs/demo/follow.md b/docs/demo/follow.md
deleted file mode 100644
index c75cf5b..0000000
--- a/docs/demo/follow.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Follow
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/follow.tsx"></code>
\ No newline at end of file
diff --git a/docs/demo/immutable.md b/docs/demo/immutable.md
new file mode 100644
index 0000000..c268809
--- /dev/null
+++ b/docs/demo/immutable.md
@@ -0,0 +1,8 @@
+---
+title: Immutable
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/immutable.tsx" ></code>
\ No newline at end of file
diff --git a/docs/demo/point.md b/docs/demo/point.md
deleted file mode 100644
index 1a62de8..0000000
--- a/docs/demo/point.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Point
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/point.tsx" ></code>
\ No newline at end of file
diff --git a/docs/examples/follow.tsx b/docs/examples/follow.tsx
deleted file mode 100644
index 63928d5..0000000
--- a/docs/examples/follow.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import Align from '../../src';
-
-const Demo = () => {
-  const [width, setWidth] = React.useState(100);
-  const [height, setHeight] = React.useState(100);
-  const [left, setLeft] = React.useState<string | number>(100);
-  const [top, setTop] = React.useState<string | number>(100);
-  const [visible, setVisible] = React.useState(true);
-  const [svg, setSvg] = React.useState(false);
-
-  const sharedStyle: React.CSSProperties = {
-    width,
-    height,
-    position: 'absolute',
-    left,
-    top,
-    display: visible ? 'flex' : 'none',
-  };
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => {
-          setLeft(`${Math.random() * 100}%`);
-          setTop(`${Math.random() * 100}%`);
-          setWidth(50 + Math.random() * 50);
-          setHeight(50 + Math.random() * 50);
-        }}
-      >
-        Random Size and Position
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          setVisible(!visible);
-        }}
-      >
-        Trigger Visible
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          setSvg(!svg);
-        }}
-      >
-        Follow SVG ({String(svg)})
-      </button>
-
-      <div
-        style={{
-          border: '1px solid red',
-          height: '50vh',
-          position: 'relative',
-        }}
-      >
-        {svg ? (
-          <svg id="content" width={width} height={height} style={sharedStyle}>
-            <rect x="0" y="0" width={width} height={height} />
-          </svg>
-        ) : (
-          <div
-            style={{
-              border: '1px solid green',
-              boxSizing: 'border-box',
-              alignItems: 'center',
-              justifyContent: 'center',
-              ...sharedStyle,
-            }}
-            id="content"
-          >
-            Content
-          </div>
-        )}
-
-        <Align target={() => document.getElementById('content')} align={{ points: ['tc', 'bc'] }}>
-          <div
-            style={{
-              border: '1px solid blue',
-              position: 'absolute',
-            }}
-          >
-            Popup
-          </div>
-        </Align>
-      </div>
-    </div>
-  );
-};
-
-export default Demo;
diff --git a/docs/examples/immutable.tsx b/docs/examples/immutable.tsx
new file mode 100644
index 0000000..46d5cd6
--- /dev/null
+++ b/docs/examples/immutable.tsx
@@ -0,0 +1,66 @@
+import {
+  createContext,
+  makeImmutable,
+  responseImmutable,
+  useContext,
+} from '@rc-component/context';
+import React from 'react';
+import useRenderTimes from './useRenderTimes';
+
+const AppContext = createContext<{
+  appCnt: number;
+  appUpdateCnt: number;
+}>();
+
+const MyApp = ({ rootCnt, children }: { rootCnt: number; children?: React.ReactNode }) => {
+  const [appCnt, setAppCnt] = React.useState(0);
+  const [appUpdateCnt, setAppUpdateCnt] = React.useState(0);
+  const renderTimes = useRenderTimes();
+
+  return (
+    <AppContext.Provider value={{ appCnt, appUpdateCnt }}>
+      <button type="button" onClick={() => setAppCnt(v => v + 1)}>
+        App CNT: {appCnt}
+      </button>
+      <button type="button" onClick={() => setAppUpdateCnt(v => v + 1)}>
+        App Need Component Update CNT: {appUpdateCnt}
+      </button>
+      App Render Times: {renderTimes} / Root CNT: {rootCnt}
+      <div style={{ border: '1px solid blue', padding: 16 }}>{children}</div>
+    </AppContext.Provider>
+  );
+};
+const ImmutableMyApp = makeImmutable(MyApp);
+
+const MyComponent = ({ name }: { name: any }) => {
+  const renderTimes = useRenderTimes();
+  const value = useContext(AppContext, name);
+
+  return (
+    <div>
+      {name}: {value} / Component Render Times: {renderTimes}
+    </div>
+  );
+};
+const ImmutableMyComponent = responseImmutable(MyComponent);
+
+export default () => {
+  const [rootCnt, setRootCnt] = React.useState(0);
+  const renderTimes = useRenderTimes();
+
+  return (
+    <>
+      {' '}
+      <button type="button" onClick={() => setRootCnt(v => v + 1)}>
+        Root CNT: {rootCnt}
+      </button>
+      Root RenderTimes: {renderTimes}{' '}
+      <div style={{ border: '1px solid red', padding: 16 }}>
+        <ImmutableMyApp rootCnt={rootCnt}>
+          <ImmutableMyComponent name="appUpdateCnt" />
+          <ImmutableMyComponent name="notConsumeAppContext" />
+        </ImmutableMyApp>
+      </div>
+    </>
+  );
+};
diff --git a/docs/examples/point.tsx b/docs/examples/point.tsx
deleted file mode 100644
index 9623b1f..0000000
--- a/docs/examples/point.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import Align from '../../src';
-
-const align = {
-  points: ['cc', 'cc'],
-};
-
-class Demo extends Component {
-  state = {
-    point: null,
-  };
-
-  onClick = ({ pageX, pageY }) => {
-    this.setState({ point: { pageX, pageY } });
-  };
-
-  render() {
-    return (
-      <div style={{ marginBottom: 170 }}>
-        <div
-          style={{ margin: 20, border: '1px solid red', padding: '100px 0', textAlign: 'center' }}
-          onClick={this.onClick}
-        >
-          Click this region please : )
-        </div>
-
-        <Align ref={this.alignRef} target={this.state.point} align={align}>
-          <div
-            style={{
-              position: 'absolute',
-              width: 100,
-              height: 100,
-              background: 'rgba(0, 255, 0, 0.5)',
-              pointerEvents: 'none',
-            }}
-          >
-            Align
-          </div>
-        </Align>
-      </div>
-    );
-  }
-}
-
-export default Demo;
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
index 05c6be9..7ef11db 100644
--- a/docs/examples/simple.tsx
+++ b/docs/examples/simple.tsx
@@ -1,176 +1,40 @@
-import Align, { type RefAlign } from 'rc-align';
-import React, { Component } from 'react';
-
-const allPoints = ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'bc', 'br'];
-
-interface TestState {
-  monitor: boolean;
-  random: boolean;
-  disabled: boolean;
-  randomWidth: number;
-  align: any;
-  sourceWidth: number;
-}
-
-class Test extends Component<{}, TestState> {
-  state = {
-    monitor: true,
-    random: false,
-    disabled: false,
-    randomWidth: 100,
-    align: {
-      points: ['cc', 'cc'],
-    },
-    sourceWidth: 50,
-  };
-
-  id: NodeJS.Timer;
-  $container: HTMLElement;
-  $align: RefAlign;
-
-  componentDidMount() {
-    this.id = setInterval(() => {
-      const { random } = this.state;
-      if (random) {
-        this.setState({
-          randomWidth: 60 + 40 * Math.random(),
-        });
-      }
-    }, 1000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.id);
-  }
-
-  getTarget = () => {
-    if (!this.$container) {
-      // parent ref not attached
-      this.$container = document.getElementById('container');
-    }
-    return this.$container;
-  };
-
-  containerRef = ele => {
-    this.$container = ele;
-  };
-
-  alignRef = node => {
-    this.$align = node;
-  };
-
-  toggleMonitor = () => {
-    this.setState(({ monitor }) => ({
-      monitor: !monitor,
-    }));
-  };
-
-  toggleRandom = () => {
-    this.setState(({ random }) => ({
-      random: !random,
-    }));
-  };
-
-  toggleDisabled = () => {
-    this.setState(({ disabled }) => ({
-      disabled: !disabled,
-    }));
-  };
-
-  randomAlign = () => {
-    const randomPoints = [];
-    randomPoints.push(allPoints[Math.floor(Math.random() * 100) % allPoints.length]);
-    randomPoints.push(allPoints[Math.floor(Math.random() * 100) % allPoints.length]);
-    this.setState({
-      align: {
-        points: randomPoints,
-      },
-    });
-  };
-
-  forceAlign = () => {
-    this.$align.forceAlign();
-  };
-
-  toggleSourceSize = () => {
-    this.setState({
-      // eslint-disable-next-line react/no-access-state-in-setstate
-      sourceWidth: this.state.sourceWidth + 10,
-    });
-  };
-
-  render() {
-    const { random, randomWidth } = this.state;
-
-    return (
-      <div
-        style={{
-          margin: 50,
-        }}
-      >
-        <p>
-          <button type="button" onClick={this.forceAlign}>
-            Force align
-          </button>
-          &nbsp;&nbsp;&nbsp;
-          <button type="button" onClick={this.toggleSourceSize}>
-            Resize Source
-          </button>
-          &nbsp;&nbsp;&nbsp;
-          <button type="button" onClick={this.randomAlign}>
-            Random Align
-          </button>
-          &nbsp;&nbsp;&nbsp;
-          <label>
-            <input type="checkbox" checked={this.state.monitor} onChange={this.toggleMonitor} />
-            &nbsp; Monitor window resize
-          </label>
-          <label>
-            <input type="checkbox" checked={this.state.random} onChange={this.toggleRandom} />
-            &nbsp; Random Size
-          </label>
-          <label>
-            <input type="checkbox" checked={this.state.disabled} onChange={this.toggleDisabled} />
-            &nbsp; Disabled
-          </label>
-        </p>
-        <div
-          ref={this.containerRef}
-          id="container"
-          style={{
-            width: '80%',
-            // maxWidth: 1000,
-            height: 500,
-            border: '1px solid red',
-            ...(random
-              ? {
-                  width: `${randomWidth}%`,
-                }
-              : null),
-          }}
-        >
-          <Align
-            ref={this.alignRef}
-            target={this.getTarget}
-            monitorWindowResize={this.state.monitor}
-            align={this.state.align}
-            disabled={this.state.disabled}
-          >
-            <div
-              style={{
-                position: 'absolute',
-                width: this.state.sourceWidth,
-                height: 50,
-                background: 'yellow',
-              }}
-            >
-              <input defaultValue="source" style={{ width: '100%' }} />
-            </div>
-          </Align>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Test;
+import { createContext, useContext } from '@rc-component/context';
+import React from 'react';
+import useRenderTimes from './useRenderTimes';
+
+const CountContext = createContext<{
+  cnt1: number;
+  cnt2: number;
+}>();
+
+const MyConsumer = React.memo(({ name }: { name: any }) => {
+  const value = useContext(CountContext, name);
+  const renderTimes = useRenderTimes();
+
+  return (
+    <div>
+      <label>{JSON.stringify(name)}:</label>
+      {value} ({renderTimes} times)
+    </div>
+  );
+});
+
+export default () => {
+  const [cnt1, setCnt1] = React.useState(0);
+  const [cnt2, setCnt2] = React.useState(0);
+  const renderTimes = useRenderTimes();
+
+  return (
+    <CountContext.Provider value={{ cnt1, cnt2 }}>
+      <button type="button" onClick={() => setCnt1(v => v + 1)}>
+        cnt 1: {cnt1}
+      </button>
+      <button type="button" onClick={() => setCnt2(v => v + 1)}>
+        cnt 2: {cnt2}
+      </button>
+      {renderTimes} times
+      <MyConsumer name="cnt1" />
+      <MyConsumer name="cnt2" />
+    </CountContext.Provider>
+  );
+};
diff --git a/docs/examples/useRenderTimes.ts b/docs/examples/useRenderTimes.ts
new file mode 100644
index 0000000..d9bfa0f
--- /dev/null
+++ b/docs/examples/useRenderTimes.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const useRenderTimes = () => {
+  const renderRef = React.useRef(0);
+  renderRef.current += 1;
+
+  return renderRef.current;
+};
+
+export default useRenderTimes;
diff --git a/docs/index.md b/docs/index.md
index 59385d5..4f52b4f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,7 +1,7 @@
 ---
 hero:
-  title: rc-align
-  description: align ui component for react
+  title: @rc-component/context
+  description: Context Selector for perf enhancement
 ---
 
 <embed src="../README.md"></embed>
\ No newline at end of file
diff --git a/index.js b/index.js
deleted file mode 100644
index 79eb820..0000000
--- a/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-'use strict';
-
-// export this package's api
-import Align from './src/';
-export default Align;
diff --git a/now.json b/now.json
index 15f6864..0b0bc3f 100644
--- a/now.json
+++ b/now.json
@@ -1,6 +1,6 @@
 {
   "version": 2,
-  "name": "rc-align",
+  "name": "rc-context",
   "builds": [
     {
       "src": "package.json",
diff --git a/package.json b/package.json
index 8d8fcec..40e6443 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,19 @@
 {
-  "name": "rc-align",
-  "version": "4.0.15",
-  "description": "align ui component for react",
+  "name": "@rc-component/context",
+  "version": "1.0.0-alpha.0",
+  "description": "React way perf context selector",
   "keywords": [
     "react",
     "react-component",
-    "react-align",
-    "align"
+    "context"
   ],
-  "homepage": "http://github.com/react-component/align",
+  "homepage": "http://github.com/react-component/context",
   "bugs": {
-    "url": "http://github.com/react-component/align/issues"
+    "url": "http://github.com/react-component/context/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:react-component/align.git"
+    "url": "git@github.com:react-component/context.git"
   },
   "license": "MIT",
   "author": "",
@@ -37,10 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
-    "classnames": "2.x",
-    "dom-align": "^1.7.0",
-    "rc-util": "^5.26.0",
-    "resize-observer-polyfill": "^1.5.1"
+    "rc-util": "^5.27.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
diff --git a/src/Align.tsx b/src/Align.tsx
deleted file mode 100644
index 3a075da..0000000
--- a/src/Align.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * Removed props:
- *  - childrenProps
- */
-
-import { alignElement, alignPoint } from 'dom-align';
-import isEqual from 'rc-util/lib/isEqual';
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import isVisible from 'rc-util/lib/Dom/isVisible';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import { composeRef } from 'rc-util/lib/ref';
-import React from 'react';
-
-import useBuffer from './hooks/useBuffer';
-import type { AlignResult, AlignType, TargetPoint, TargetType } from './interface';
-import { isSamePoint, monitorResize, restoreFocus } from './util';
-
-type OnAlign = (source: HTMLElement, result: AlignResult) => void;
-
-export interface AlignProps {
-  align: AlignType;
-  target: TargetType;
-  onAlign?: OnAlign;
-  monitorBufferTime?: number;
-  monitorWindowResize?: boolean;
-  disabled?: boolean;
-  children: React.ReactElement;
-}
-
-export interface RefAlign {
-  forceAlign: () => void;
-}
-
-function getElement(func: TargetType) {
-  if (typeof func !== 'function') return null;
-  return func();
-}
-
-function getPoint(point: TargetType) {
-  if (typeof point !== 'object' || !point) return null;
-  return point;
-}
-
-const Align: React.ForwardRefRenderFunction<RefAlign, AlignProps> = (
-  { children, disabled, target, align, onAlign, monitorWindowResize, monitorBufferTime = 0 },
-  ref,
-) => {
-  const cacheRef = React.useRef<{ element?: HTMLElement; point?: TargetPoint; align?: AlignType }>(
-    {},
-  );
-
-  /** Popup node ref */
-  const nodeRef = React.useRef();
-  let childNode = React.Children.only(children);
-
-  // ===================== Align ======================
-  // We save the props here to avoid closure makes props ood
-  const forceAlignPropsRef = React.useRef<{
-    disabled?: boolean;
-    target?: TargetType;
-    align?: AlignType;
-    onAlign?: OnAlign;
-  }>({});
-  forceAlignPropsRef.current.disabled = disabled;
-  forceAlignPropsRef.current.target = target;
-  forceAlignPropsRef.current.align = align;
-  forceAlignPropsRef.current.onAlign = onAlign;
-
-  const [forceAlign, cancelForceAlign] = useBuffer(() => {
-    const {
-      disabled: latestDisabled,
-      target: latestTarget,
-      align: latestAlign,
-      onAlign: latestOnAlign,
-    } = forceAlignPropsRef.current;
-
-    const source = nodeRef.current;
-
-    if (!latestDisabled && latestTarget && source) {
-      let result: AlignResult;
-      const element = getElement(latestTarget);
-      const point = getPoint(latestTarget);
-
-      cacheRef.current.element = element;
-      cacheRef.current.point = point;
-      cacheRef.current.align = latestAlign;
-
-      // IE lose focus after element realign
-      // We should record activeElement and restore later
-      const { activeElement } = document;
-
-      // We only align when element is visible
-      if (element && isVisible(element)) {
-        result = alignElement(source, element, latestAlign);
-      } else if (point) {
-        result = alignPoint(source, point, latestAlign);
-      }
-
-      restoreFocus(activeElement, source);
-
-      if (latestOnAlign && result) {
-        latestOnAlign(source, result);
-      }
-
-      return true;
-    }
-
-    return false;
-  }, monitorBufferTime);
-
-  // ===================== Effect =====================
-  // Handle props change
-  const [element, setElement] = React.useState<HTMLElement>();
-  const [point, setPoint] = React.useState<TargetPoint>();
-
-  useLayoutEffect(() => {
-    setElement(getElement(target));
-    setPoint(getPoint(target));
-  });
-
-  React.useEffect(() => {
-    if (
-      cacheRef.current.element !== element ||
-      !isSamePoint(cacheRef.current.point, point) ||
-      !isEqual(cacheRef.current.align, align)
-    ) {
-      forceAlign();
-    }
-  });
-
-  // Watch popup element resize
-  React.useEffect(() => {
-    const cancelFn = monitorResize(nodeRef.current, forceAlign);
-    return cancelFn;
-  }, [nodeRef.current]);
-
-  // Watch target element resize
-  React.useEffect(() => {
-    const cancelFn = monitorResize(element, forceAlign);
-    return cancelFn;
-  }, [element]);
-
-  // Listen for disabled change
-  React.useEffect(() => {
-    if (!disabled) {
-      forceAlign();
-    } else {
-      cancelForceAlign();
-    }
-  }, [disabled]);
-
-  // Listen for window resize
-  React.useEffect(() => {
-    if (monitorWindowResize) {
-      const cancelFn = addEventListener(window, 'resize', forceAlign);
-
-      return cancelFn.remove;
-    }
-  }, [monitorWindowResize]);
-
-  // Clear all if unmount
-  React.useEffect(
-    () => () => {
-      cancelForceAlign();
-    },
-    [],
-  );
-
-  // ====================== Ref =======================
-  React.useImperativeHandle(ref, () => ({
-    forceAlign: () => forceAlign(true),
-  }));
-
-  // ===================== Render =====================
-  if (React.isValidElement(childNode)) {
-    childNode = React.cloneElement<any>(childNode, {
-      ref: composeRef((childNode as any).ref, nodeRef),
-    });
-  }
-
-  return childNode;
-};
-
-const RcAlign = React.forwardRef(Align);
-RcAlign.displayName = 'Align';
-
-export default RcAlign;
diff --git a/src/Immutable.tsx b/src/Immutable.tsx
new file mode 100644
index 0000000..64cd9f1
--- /dev/null
+++ b/src/Immutable.tsx
@@ -0,0 +1,56 @@
+import { supportRef } from 'rc-util/lib/ref';
+import * as React from 'react';
+
+const RenderContext = React.createContext<number>(0);
+
+/**
+ * Wrapped Component will be marked as Immutable.
+ * When Component parent trigger render,
+ * it will notice children component (use with `responseImmutable`) node that parent has updated.
+ */
+export function makeImmutable<T extends React.ComponentType<any>>(Component: T): T {
+  const refAble = supportRef(Component);
+
+  const ImmutableComponent = function (props: any, ref: any) {
+    const refProps = refAble ? { ref } : {};
+    const renderTimesRef = React.useRef(0);
+    renderTimesRef.current += 1;
+
+    return (
+      <RenderContext.Provider value={renderTimesRef.current}>
+        <Component {...props} {...refProps} />
+      </RenderContext.Provider>
+    );
+  };
+
+  if (process.env.NODE_ENV !== 'production') {
+    ImmutableComponent.displayName = `ImmutableRoot(${Component.displayName || Component.name})`;
+  }
+
+  return refAble ? React.forwardRef(ImmutableComponent) : (ImmutableComponent as any);
+}
+
+/**
+ * Wrapped Component with `React.memo`.
+ * But will rerender when parent with `makeImmutable` rerender.
+ */
+export function responseImmutable<T extends React.ComponentType<any>>(Component: T): T {
+  const refAble = supportRef(Component);
+
+  const ImmutableComponent = function (props: any, ref: any) {
+    const refProps = refAble ? { ref } : {};
+    React.useContext(RenderContext);
+
+    return <Component {...props} {...refProps} />;
+  };
+
+  if (process.env.NODE_ENV !== 'production') {
+    ImmutableComponent.displayName = `ImmutableResponse(${
+      Component.displayName || Component.name
+    })`;
+  }
+
+  return refAble
+    ? React.memo(React.forwardRef(ImmutableComponent))
+    : (React.memo(ImmutableComponent) as any);
+}
diff --git a/src/context.tsx b/src/context.tsx
new file mode 100644
index 0000000..68f6c57
--- /dev/null
+++ b/src/context.tsx
@@ -0,0 +1,130 @@
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import isEqual from 'rc-util/lib/isEqual';
+import * as React from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+
+export type Selector<ContextProps, SelectorValue = ContextProps> = (
+  value: ContextProps,
+) => SelectorValue;
+
+export type Trigger<ContextProps> = (value: ContextProps) => void;
+
+export type Listeners<ContextProps> = Set<Trigger<ContextProps>>;
+
+export interface Context<ContextProps> {
+  getValue: () => ContextProps;
+  listeners: Listeners<ContextProps>;
+}
+
+export interface ContextSelectorProviderProps<T> {
+  value: T;
+  children?: React.ReactNode;
+}
+
+export interface SelectorContext<ContextProps> {
+  Context: React.Context<Context<ContextProps>>;
+  Provider: React.ComponentType<ContextSelectorProviderProps<ContextProps>>;
+  defaultValue?: ContextProps;
+}
+
+export function createContext<ContextProps>(
+  defaultValue?: ContextProps,
+): SelectorContext<ContextProps> {
+  const Context = React.createContext<Context<ContextProps>>(undefined);
+
+  const Provider = ({ value, children }: ContextSelectorProviderProps<ContextProps>) => {
+    const valueRef = React.useRef(value);
+    valueRef.current = value;
+
+    const [context] = React.useState<Context<ContextProps>>(() => ({
+      getValue: () => valueRef.current,
+      listeners: new Set(),
+    }));
+
+    useLayoutEffect(() => {
+      unstable_batchedUpdates(() => {
+        context.listeners.forEach(listener => {
+          listener(value);
+        });
+      });
+    }, [value]);
+
+    return <Context.Provider value={context}>{children}</Context.Provider>;
+  };
+
+  return { Context, Provider, defaultValue };
+}
+
+/** e.g. useSelect(userContext) => user */
+export function useContext<ContextProps>(holder: SelectorContext<ContextProps>): ContextProps;
+
+/** e.g. useSelect(userContext, user => user.name) => user.name */
+export function useContext<ContextProps, SelectorValue>(
+  holder: SelectorContext<ContextProps>,
+  selector: Selector<ContextProps, SelectorValue>,
+): SelectorValue;
+
+/** e.g. useSelect(userContext, ['name', 'age']) => user { name, age } */
+export function useContext<ContextProps, SelectorValue extends Partial<ContextProps>>(
+  holder: SelectorContext<ContextProps>,
+  selector: (keyof ContextProps)[],
+): SelectorValue;
+
+/** e.g. useSelect(userContext, 'name') => user.name */
+export function useContext<ContextProps, PropName extends keyof ContextProps>(
+  holder: SelectorContext<ContextProps>,
+  selector: PropName,
+): ContextProps[PropName];
+
+export function useContext<ContextProps, SelectorValue>(
+  holder: SelectorContext<ContextProps>,
+  selector?: Selector<ContextProps, any> | (keyof ContextProps)[] | keyof ContextProps,
+) {
+  const eventSelector = useEvent<Selector<ContextProps, SelectorValue>>(
+    typeof selector === 'function'
+      ? selector
+      : ctx => {
+          if (selector === undefined) {
+            return ctx;
+          }
+
+          if (!Array.isArray(selector)) {
+            return ctx[selector];
+          }
+
+          const obj = {} as SelectorValue;
+          selector.forEach(key => {
+            (obj as any)[key] = ctx[key];
+          });
+          return obj;
+        },
+  );
+  const context = React.useContext(holder?.Context);
+  const { listeners, getValue } = context || {};
+
+  const valueRef = React.useRef<SelectorValue>();
+  valueRef.current = eventSelector(context ? getValue() : holder?.defaultValue);
+  const [, forceUpdate] = React.useState({});
+
+  useLayoutEffect(() => {
+    if (!context) {
+      return;
+    }
+
+    function trigger(nextValue: ContextProps) {
+      const nextSelectorValue = eventSelector(nextValue);
+      if (!isEqual(valueRef.current, nextSelectorValue, true)) {
+        forceUpdate({});
+      }
+    }
+
+    listeners.add(trigger);
+
+    return () => {
+      listeners.delete(trigger);
+    };
+  }, [context]);
+
+  return valueRef.current;
+}
diff --git a/src/hooks/useBuffer.tsx b/src/hooks/useBuffer.tsx
deleted file mode 100644
index 72cc711..0000000
--- a/src/hooks/useBuffer.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-
-export default (callback: (force?: boolean) => boolean, buffer: number) => {
-  const calledRef = React.useRef<boolean>(false);
-  const timeoutRef = React.useRef<number>(null);
-
-  function cancelTrigger() {
-    window.clearTimeout(timeoutRef.current);
-  }
-
-  function trigger(force?: boolean) {
-    cancelTrigger();
-
-    if (!calledRef.current || force === true) {
-      if (callback(force) === false) {
-        // Not delay since callback cancelled self
-        return;
-      }
-
-      calledRef.current = true;
-      timeoutRef.current = window.setTimeout(() => {
-        calledRef.current = false;
-      }, buffer);
-    } else {
-      timeoutRef.current = window.setTimeout(() => {
-        calledRef.current = false;
-        trigger();
-      }, buffer);
-    }
-  }
-
-  return [
-    trigger,
-    () => {
-      calledRef.current = false;
-      cancelTrigger();
-    },
-  ];
-};
diff --git a/src/index.ts b/src/index.ts
index 020f8e8..0adb1aa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
-// export this package's api
-import Align from './Align';
+import type { SelectorContext } from './context';
+import { createContext, useContext } from './context';
+import { makeImmutable, responseImmutable } from './Immutable';
 
-export type { RefAlign } from './Align';
-
-export default Align;
+export { createContext, useContext, makeImmutable, responseImmutable };
+export type { SelectorContext };
diff --git a/src/interface.ts b/src/interface.ts
deleted file mode 100644
index ab91f17..0000000
--- a/src/interface.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
-export type AlignPoint = string;
-
-export interface AlignType {
-  /**
-   * move point of source node to align with point of target node.
-   * Such as ['tr','cc'], align top right point of source node with center point of target node.
-   * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
-  points?: AlignPoint[];
-  /**
-   * offset source node by offset[0] in x and offset[1] in y.
-   * If offset contains percentage string value, it is relative to sourceNode region.
-   */
-  offset?: number[];
-  /**
-   * offset target node by offset[0] in x and offset[1] in y.
-   * If targetOffset contains percentage string value, it is relative to targetNode region.
-   */
-  targetOffset?: number[];
-  /**
-   * If adjustX field is true, will adjust source node in x direction if source node is invisible.
-   * If adjustY field is true, will adjust source node in y direction if source node is invisible.
-   */
-  overflow?: {
-    adjustX?: boolean | number;
-    adjustY?: boolean | number;
-  };
-  /**
-   * Whether use css right instead of left to position
-   */
-  useCssRight?: boolean;
-  /**
-   * Whether use css bottom instead of top to position
-   */
-  useCssBottom?: boolean;
-  /**
-   * Whether use css transform instead of left/top/right/bottom to position if browser supports.
-   * Defaults to false.
-   */
-  useCssTransform?: boolean;
-}
-
-export interface AlignResult {
-  points: AlignPoint[];
-  offset: number[];
-  targetOffset: number[];
-  overflow: {
-    adjustX: boolean | number;
-    adjustY: boolean | number;
-  };
-}
-
-export interface TargetPoint {
-  clientX?: number;
-  clientY?: number;
-  pageX?: number;
-  pageY?: number;
-}
-
-export type TargetType = (() => HTMLElement) | TargetPoint;
diff --git a/src/util.ts b/src/util.ts
deleted file mode 100644
index 30b1f4b..0000000
--- a/src/util.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import ResizeObserver from 'resize-observer-polyfill';
-import contains from 'rc-util/lib/Dom/contains';
-import type { TargetPoint } from './interface';
-
-export function isSamePoint(prev: TargetPoint, next: TargetPoint) {
-  if (prev === next) return true;
-  if (!prev || !next) return false;
-
-  if ('pageX' in next && 'pageY' in next) {
-    return prev.pageX === next.pageX && prev.pageY === next.pageY;
-  }
-
-  if ('clientX' in next && 'clientY' in next) {
-    return prev.clientX === next.clientX && prev.clientY === next.clientY;
-  }
-
-  return false;
-}
-
-export function restoreFocus(activeElement, container) {
-  // Focus back if is in the container
-  if (
-    activeElement !== document.activeElement &&
-    contains(container, activeElement) &&
-    typeof activeElement.focus === 'function'
-  ) {
-    activeElement.focus();
-  }
-}
-
-export function monitorResize(element: HTMLElement, callback: Function) {
-  let prevWidth: number = null;
-  let prevHeight: number = null;
-
-  function onResize([{ target }]: ResizeObserverEntry[]) {
-    if (!document.documentElement.contains(target)) return;
-    const { width, height } = target.getBoundingClientRect();
-    const fixedWidth = Math.floor(width);
-    const fixedHeight = Math.floor(height);
-
-    if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
-      // https://webkit.org/blog/9997/resizeobserver-in-webkit/
-      Promise.resolve().then(() => {
-        callback({ width: fixedWidth, height: fixedHeight });
-      });
-    }
-
-    prevWidth = fixedWidth;
-    prevHeight = fixedHeight;
-  }
-
-  const resizeObserver = new ResizeObserver(onResize);
-  if (element) {
-    resizeObserver.observe(element);
-  }
-
-  return () => {
-    resizeObserver.disconnect();
-  };
-}
diff --git a/tests/common.tsx b/tests/common.tsx
new file mode 100644
index 0000000..1bae1bb
--- /dev/null
+++ b/tests/common.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const useRenderTimes = () => {
+  const renderRef = React.useRef(0);
+  renderRef.current += 1;
+
+  return renderRef.current;
+};
+
+export function RenderTimer({ id }: { id?: string }) {
+  const renderTimes = useRenderTimes();
+
+  return (
+    <div id={id} className="render-times">
+      {renderTimes}
+    </div>
+  );
+}
+
+export function Value({ id, value }: { id?: string; value: any }) {
+  const str = JSON.stringify(value);
+
+  return (
+    <div id={id} className="value">
+      {str.replace(/^"/, '').replace(/"$/, '')}
+    </div>
+  );
+}
diff --git a/tests/context.test.tsx b/tests/context.test.tsx
new file mode 100644
index 0000000..172caee
--- /dev/null
+++ b/tests/context.test.tsx
@@ -0,0 +1,201 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { createContext, useContext } from '../src';
+import { RenderTimer, Value } from './common';
+
+describe('Basic', () => {
+  interface User {
+    name: string;
+    age: number;
+  }
+
+  const UserContext = createContext<User>();
+
+  const Root = ({ children }: { children?: React.ReactNode }) => {
+    const [name, setName] = React.useState('bamboo');
+    const [age, setAge] = React.useState(30);
+
+    return (
+      <UserContext.Provider value={{ name, age }}>
+        <input id="name" value={name} onChange={e => setName(e.target.value)} />
+        <input id="age" value={age} onChange={e => setAge(Number(e.target.value))} />
+
+        {children}
+      </UserContext.Provider>
+    );
+  };
+
+  function changeValue(container: HTMLElement, id: string, value: string) {
+    fireEvent.change(container.querySelector(`#${id}`), {
+      target: {
+        value,
+      },
+    });
+  }
+
+  it('raw', () => {
+    const Raw = () => {
+      const user = useContext(UserContext);
+
+      return (
+        <>
+          <Value id="value" value={user} />
+          <RenderTimer id="raw" />
+        </>
+      );
+    };
+
+    const { container } = render(
+      <Root>
+        <Raw />
+      </Root>,
+    );
+
+    // Mount
+    expect(container.querySelector('#raw')!.textContent).toEqual('1');
+
+    // Update `name`: Full Update
+    changeValue(container, 'name', 'light');
+    expect(container.querySelector('#raw')!.textContent).toEqual('2');
+    expect(container.querySelector('#value')!.textContent).toEqual(
+      JSON.stringify({
+        name: 'light',
+        age: 30,
+      }),
+    );
+
+    // Update `age`: Full Update
+    changeValue(container, 'age', '20');
+    expect(container.querySelector('#raw')!.textContent).toEqual('3');
+    expect(container.querySelector('#value')!.textContent).toEqual(
+      JSON.stringify({
+        name: 'light',
+        age: 20,
+      }),
+    );
+  });
+
+  it('PropName', () => {
+    const PropName = ({ name }: { name: keyof User }) => {
+      const value = useContext(UserContext, name);
+
+      return (
+        <>
+          <Value id={`${name}-value`} value={value} />
+          <RenderTimer id={`${name}-times`} />
+        </>
+      );
+    };
+
+    const { container } = render(
+      <Root>
+        <PropName name="name" />
+        <PropName name="age" />
+      </Root>,
+    );
+
+    // Mount
+    expect(container.querySelector('#name-times')!.textContent).toEqual('1');
+    expect(container.querySelector('#age-times')!.textContent).toEqual('1');
+
+    // Update `name`: Partial Update
+    changeValue(container, 'name', 'light');
+    expect(container.querySelector('#name-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#name-value')!.textContent).toEqual('light');
+    expect(container.querySelector('#age-times')!.textContent).toEqual('1');
+
+    // Update `age`: Partial Update
+    changeValue(container, 'age', '20');
+    expect(container.querySelector('#name-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#age-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#age-value')!.textContent).toEqual('20');
+  });
+
+  it('PropNameArray', () => {
+    const PropName = ({ name }: { name: (keyof User)[] }) => {
+      const value = useContext(UserContext, name);
+
+      return (
+        <>
+          <Value id={`${name.join('_')}-value`} value={value} />
+          <RenderTimer id={`${name.join('_')}-times`} />
+        </>
+      );
+    };
+
+    const { container } = render(
+      <Root>
+        <PropName name={['name']} />
+        <PropName name={['name', 'age']} />
+      </Root>,
+    );
+
+    // Mount
+    expect(container.querySelector('#name-times')!.textContent).toEqual('1');
+    expect(container.querySelector('#name_age-times')!.textContent).toEqual('1');
+
+    // Update `name`: Partial Update
+    changeValue(container, 'name', 'light');
+    expect(container.querySelector('#name-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#name-value')!.textContent).toEqual(
+      JSON.stringify({ name: 'light' }),
+    );
+    expect(container.querySelector('#name_age-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#name_age-value')!.textContent).toEqual(
+      JSON.stringify({ name: 'light', age: 30 }),
+    );
+
+    // Update `age`: Partial Update
+    changeValue(container, 'age', '20');
+    expect(container.querySelector('#name-times')!.textContent).toEqual('2');
+    expect(container.querySelector('#name_age-times')!.textContent).toEqual('3');
+    expect(container.querySelector('#name_age-value')!.textContent).toEqual(
+      JSON.stringify({ name: 'light', age: 20 }),
+    );
+  });
+
+  it('function', () => {
+    const Func = () => {
+      const value = useContext(UserContext, v => v.name);
+
+      return (
+        <>
+          <Value id="value" value={value} />
+          <RenderTimer id="times" />
+        </>
+      );
+    };
+
+    const { container } = render(
+      <Root>
+        <Func />
+      </Root>,
+    );
+
+    // Mount
+    expect(container.querySelector('#times')!.textContent).toEqual('1');
+
+    // Update `name`: Update
+    changeValue(container, 'name', 'light');
+    expect(container.querySelector('#times')!.textContent).toEqual('2');
+    expect(container.querySelector('#value')!.textContent).toEqual('light');
+
+    // Update `age`: Not Update
+    changeValue(container, 'age', '20');
+    expect(container.querySelector('#times')!.textContent).toEqual('2');
+    expect(container.querySelector('#value')!.textContent).toEqual('light');
+  });
+
+  it('defaultValue', () => {
+    const DefaultContext = createContext('little');
+    const Demo = () => (
+      <>
+        <Value id="value" value={useContext(DefaultContext)} />
+      </>
+    );
+
+    const { container } = render(<Demo />);
+
+    expect(container.querySelector('#value')!.textContent).toEqual('little');
+  });
+});
diff --git a/tests/element.test.tsx b/tests/element.test.tsx
deleted file mode 100644
index 102765f..0000000
--- a/tests/element.test.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { render } from '@testing-library/react';
-import { spyElementPrototype } from 'rc-util/lib/test/domHook';
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import Align from '../src';
-
-describe('element align', () => {
-  beforeAll(() => {
-    spyElementPrototype(HTMLElement, 'offsetParent', {
-      get: () => ({}),
-    });
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-
-  const align = {
-    points: ['bc', 'tc'],
-  };
-
-  class Test extends React.Component<any> {
-    $target: any;
-
-    getTarget = () => this.$target;
-
-    targetRef = ele => {
-      this.$target = ele;
-    };
-
-    render() {
-      return (
-        <div style={{ paddingTop: 100 }}>
-          <div ref={this.targetRef} style={{ display: 'inline-block', width: 50, height: 50 }}>
-            target
-          </div>
-          <Align target={this.getTarget} align={align} {...this.props}>
-            <div
-              id="ele_src"
-              style={{
-                position: 'absolute',
-                width: 50,
-                height: 80,
-              }}
-            >
-              source
-            </div>
-          </Align>
-        </div>
-      );
-    }
-  }
-
-  it('resize', () => {
-    const onAlign = jest.fn();
-
-    const { unmount, rerender } = render(<Test monitorWindowResize onAlign={onAlign} />);
-    expect(onAlign).toHaveBeenCalled();
-
-    // Window resize
-    onAlign.mockReset();
-    window.dispatchEvent(new Event('resize'));
-    jest.runAllTimers();
-    expect(onAlign).toHaveBeenCalled();
-
-    // Not listen resize
-    onAlign.mockReset();
-    rerender(<Test monitorWindowResize={false} onAlign={onAlign} />);
-    window.dispatchEvent(new Event('resize'));
-    jest.runAllTimers();
-    expect(onAlign).not.toHaveBeenCalled();
-
-    // Remove should not crash
-    rerender(<Test monitorWindowResize onAlign={onAlign} />);
-    unmount();
-  });
-
-  it('disabled should trigger align', () => {
-    const onAlign = jest.fn();
-
-    const { rerender } = render(<Test monitorWindowResize onAlign={onAlign} disabled />);
-    expect(onAlign).not.toHaveBeenCalled();
-
-    rerender(<Test monitorWindowResize onAlign={onAlign} disabled={false} />);
-    jest.runAllTimers();
-    expect(onAlign).toHaveBeenCalled();
-  });
-
-  // https://github.com/ant-design/ant-design/issues/31717
-  it('changing align should trigger onAlign', () => {
-    const onAlign = jest.fn();
-    const { rerender } = render(<Test align={{ points: ['cc', 'cc'] }} onAlign={onAlign} />);
-    expect(onAlign).toHaveBeenCalledTimes(1);
-    expect(onAlign).toHaveBeenLastCalledWith(
-      expect.any(HTMLElement),
-      expect.objectContaining({ points: ['cc', 'cc'] }),
-    );
-    // wrapper.setProps({ align: { points: ['cc', 'tl'] } });
-    rerender(<Test align={{ points: ['cc', 'tl'] }} onAlign={onAlign} />);
-    jest.runAllTimers();
-    expect(onAlign).toHaveBeenCalledTimes(2);
-    expect(onAlign).toHaveBeenLastCalledWith(
-      expect.any(HTMLElement),
-      expect.objectContaining({ points: ['cc', 'tl'] }),
-    );
-  });
-
-  it('should switch to the correct align callback after starting the timers', () => {
-    // This test case is tricky. An error occurs if the following things happen
-    // exactly in this order:
-    // * Render <Align> with `onAlign1`.
-    // * The callback in useBuffer is queued using setTimeout, to trigger after
-    //   `monitorBufferTime` ms (which even when it's set to 0 is queued and
-    //   not synchronously executed).
-    // * The onAlign prop is changed to `onAlign2`.
-    // * The callback from useBuffer is called. The now correct onAlign
-    //   callback would be `onAlign2`, and `onAlign1` should not be called.
-    // This changing of the prop in between a 0 ms timeout is extremely rare.
-    // It does however occur more often in real-world applications with
-    // react-component/trigger, when its requestAnimationFrame and this timeout
-    // race against each other.
-
-    const onAlign1 = jest.fn();
-    const onAlign2 = jest.fn();
-
-    const { rerender } = render(<Test onAlign={onAlign1} />);
-
-    // Make sure the initial render's call to onAlign does not matter.
-    onAlign1.mockReset();
-    onAlign2.mockReset();
-
-    // Re-render the component with the new callback. Expect from here on all
-    // callbacks to call the new onAlign2.
-    rerender(<Test onAlign={onAlign2} />);
-
-    // Now the timeout is executed, and we expect the onAlign2 callback to
-    // receive the call, not onAlign1.
-    jest.runAllTimers();
-
-    expect(onAlign1).not.toHaveBeenCalled();
-    expect(onAlign2).toHaveBeenCalled();
-  });
-
-  it('SSR no break', () => {
-    const str = renderToString(
-      <Test
-        align={{ points: ['cc', 'cc'] }}
-        target={() => {
-          throw new Error('Not Call In Render');
-        }}
-      />,
-    );
-    expect(str).toBeTruthy();
-  });
-});
-/* eslint-enable */
diff --git a/tests/immutable.test.tsx b/tests/immutable.test.tsx
new file mode 100644
index 0000000..da355bf
--- /dev/null
+++ b/tests/immutable.test.tsx
@@ -0,0 +1,98 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { createContext, makeImmutable, responseImmutable, useContext } from '../src';
+import { RenderTimer, Value } from './common';
+
+describe('Immutable', () => {
+  const CountContext = createContext<number>();
+
+  describe('makeImmutable', () => {
+    const Root = ({ children }: { children?: React.ReactNode; trigger?: string }) => {
+      const [count, setCount] = React.useState(0);
+      const [selfState, setSelfState] = React.useState(0);
+
+      return (
+        <CountContext.Provider value={count}>
+          <button id="count" onClick={() => setCount(v => v + 1)} />
+          <button id="self" onClick={() => setSelfState(v => v + 1)} />
+
+          <Value id="count-value" value={count} />
+          <Value id="self-value" value={selfState} />
+
+          {children}
+        </CountContext.Provider>
+      );
+    };
+
+    const ImmutableRoot = makeImmutable(Root);
+
+    const Raw = () => {
+      return (
+        <>
+          <Value id="value" value={useContext(CountContext)} />
+          <RenderTimer id="raw" />
+        </>
+      );
+    };
+
+    const ImmutableRaw = responseImmutable(Raw);
+
+    it('update by outside', () => {
+      const { container, rerender } = render(
+        <ImmutableRoot>
+          <ImmutableRaw />
+        </ImmutableRoot>,
+      );
+
+      // Mount
+      expect(container.querySelector('#raw')!.textContent).toEqual('1');
+      expect(container.querySelector('#value')!.textContent).toEqual('0');
+
+      // Update `count`: Full Update
+      fireEvent.click(container.querySelector('#count'));
+      expect(container.querySelector('#count-value').textContent).toEqual('1');
+      expect(container.querySelector('#self-value').textContent).toEqual('0');
+
+      expect(container.querySelector('#raw')!.textContent).toEqual('2');
+      expect(container.querySelector('#value')!.textContent).toEqual('1');
+
+      // Update `selfState`: No Update
+      fireEvent.click(container.querySelector('#self'));
+      expect(container.querySelector('#count-value').textContent).toEqual('1');
+      expect(container.querySelector('#self-value').textContent).toEqual('1');
+
+      expect(container.querySelector('#raw')!.textContent).toEqual('2');
+      expect(container.querySelector('#value')!.textContent).toEqual('1');
+
+      // Update Root Props: Full Update
+      rerender(
+        <ImmutableRoot trigger="yes">
+          <ImmutableRaw />
+        </ImmutableRoot>,
+      );
+      expect(container.querySelector('#raw')!.textContent).toEqual('3');
+      expect(container.querySelector('#value')!.textContent).toEqual('1');
+    });
+  });
+
+  it('ref-able', () => {
+    const Root = React.forwardRef<HTMLDivElement, { children?: React.ReactNode }>((_, ref) => (
+      <div className="root" ref={ref} />
+    ));
+    const ImmutableRoot = makeImmutable(Root);
+    const Raw = React.forwardRef<HTMLDivElement>((_, ref) => <div className="raw" ref={ref} />);
+    const ImmutableRaw = responseImmutable(Raw);
+
+    const rootRef = React.createRef<HTMLDivElement>();
+    const rawRef = React.createRef<HTMLDivElement>();
+
+    const { container } = render(
+      <ImmutableRoot ref={rootRef}>
+        <ImmutableRaw ref={rawRef} />
+      </ImmutableRoot>,
+    );
+
+    expect(rootRef.current).toBe(container.querySelector('.root'));
+    expect(rawRef.current).toBe(container.querySelector('.raw'));
+  });
+});
diff --git a/tests/point.test.js b/tests/point.test.js
deleted file mode 100644
index 19ae99b..0000000
--- a/tests/point.test.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { render } from '@testing-library/react';
-import React from 'react';
-import Align from '../src';
-
-describe('point align', () => {
-  function createAlign(props) {
-    return (
-      <Align {...props}>
-        <div id="align" style={{ width: 20, height: 20, position: 'fixed' }} />
-      </Align>
-    );
-  }
-
-  it('not pass point', () => {
-    const onAlign = jest.fn();
-
-    render(
-      createAlign({
-        align: { points: ['cc'] },
-        target: null,
-        onAlign,
-      }),
-    );
-
-    expect(onAlign).not.toHaveBeenCalled();
-  });
-
-  it('pass point', () => {
-    jest.useFakeTimers();
-    const onAlign = jest.fn();
-
-    const sharedProps = {
-      align: { points: ['tc'] },
-      target: null,
-      onAlign,
-    };
-
-    const { rerender } = render(createAlign(sharedProps));
-
-    expect(onAlign).not.toHaveBeenCalled();
-
-    rerender(
-      createAlign({
-        ...sharedProps,
-        target: { pageX: 1128, pageY: 903 },
-      }),
-    );
-
-    jest.runAllTimers();
-    expect(onAlign).toHaveBeenCalled();
-
-    jest.useRealTimers();
-  });
-});
-/* eslint-enable */
diff --git a/tests/strict.test.tsx b/tests/strict.test.tsx
deleted file mode 100644
index fa87689..0000000
--- a/tests/strict.test.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { act, render } from '@testing-library/react';
-import { spyElementPrototype } from 'rc-util/lib/test/domHook';
-import React from 'react';
-import Align from '../src';
-
-(global as any).watchCnt = 0;
-
-jest.mock('../src/util', () => {
-  const originUtil = jest.requireActual('../src/util');
-
-  return {
-    ...originUtil,
-    monitorResize: (...args: any[]) => {
-      (global as any).watchCnt += 1;
-      const cancelFn = originUtil.monitorResize(...args);
-
-      return () => {
-        (global as any).watchCnt -= 1;
-        cancelFn();
-      };
-    },
-  };
-});
-
-describe('element align', () => {
-  beforeAll(() => {
-    spyElementPrototype(HTMLElement, 'offsetParent', {
-      get: () => ({}),
-    });
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-
-  it('StrictMode should keep resize observer', () => {
-    const Demo = () => {
-      const targetRef = React.useRef(null);
-
-      return (
-        <>
-          <div ref={targetRef} />
-          <Align target={() => targetRef.current} align={{ points: ['bc', 'tc'] }}>
-            <div
-              style={{
-                position: 'absolute',
-                width: 50,
-                height: 80,
-              }}
-            />
-          </Align>
-        </>
-      );
-    };
-
-    const { unmount } = render(
-      <React.StrictMode>
-        <Demo />
-      </React.StrictMode>,
-    );
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect((global as any).watchCnt).toBeGreaterThan(0);
-
-    unmount();
-    expect((global as any).watchCnt).toEqual(0);
-  });
-});
-/* eslint-enable */
diff --git a/tests/util.test.tsx b/tests/util.test.tsx
deleted file mode 100644
index 86c415b..0000000
--- a/tests/util.test.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
-import 'resize-observer-polyfill';
-import { isSamePoint, monitorResize } from '../src/util';
-
-let observer: any;
-
-
-jest.mock('resize-observer-polyfill', () => {
-  return class ResizeObserverMock {
-    onResize: any;
-    element: any;
-
-    constructor(onResize) {
-      this.onResize = onResize;
-      observer = this;
-    }
-
-    observe(element) {
-      this.element = element;
-    }
-
-    disconnect() {
-      this.element = null;
-      this.onResize = null;
-    }
-
-    triggerResize() {
-      this.onResize([{ target: this.element }]);
-    }
-  };
-});
-
-describe('util', () => {
-  describe('isSamePoint', () => {
-    it('by page', () => {
-      expect(
-        isSamePoint(
-          { pageX: 1, pageY: 2, clientX: 3, clientY: 4 },
-          { pageX: 1, pageY: 2, clientX: 1, clientY: 5 },
-        ),
-      ).toBeTruthy();
-      expect(
-        isSamePoint(
-          { pageX: 1, pageY: 2, clientX: 3, clientY: 4 },
-          { pageX: 5, pageY: 6, clientX: 3, clientY: 4 },
-        ),
-      ).toBeFalsy();
-    });
-
-    it('by client', () => {
-      expect(
-        isSamePoint(
-          { pageX: 0, pageY: 2, clientX: 3, clientY: 4 },
-          { pageY: 2, clientX: 3, clientY: 4 },
-        ),
-      ).toBeTruthy();
-      expect(
-        isSamePoint({ pageX: 0, pageY: 2, clientX: 3, clientY: 4 }, { clientX: 5, clientY: 4 }),
-      ).toBeFalsy();
-    });
-
-    it('null should be false', () => {
-      expect(isSamePoint({ pageX: 0, pageY: 2, clientX: 3, clientY: 4 }, null)).toBeFalsy();
-      expect(isSamePoint(null, { pageX: 0, pageY: 2, clientX: 3, clientY: 4 })).toBeFalsy();
-    });
-    it('2 empty should be false', () => {
-      expect(isSamePoint({}, {})).toBeFalsy();
-    });
-  });
-
-  describe('monitorResize', () => {
-    let element;
-
-    beforeEach(() => {
-      element = document.createElement('div');
-      element.getBoundingClientRect = jest.fn().mockReturnValueOnce({
-        width: 100,
-        height: 100,
-      });
-      document.body.appendChild(element);
-      jest.useFakeTimers();
-      (global as any).requestAnimationFrame = fn => {
-        setTimeout(fn, 16);
-      };
-    });
-
-    afterEach(() => {
-      if (element) element.remove();
-      jest.useRealTimers();
-    });
-
-    it('should defer callback to next frame', async () => {
-      const callback = jest.fn();
-      monitorResize(element, callback);
-      observer.triggerResize();
-      jest.runAllTimers();
-      await Promise.resolve();
-      expect(callback).toHaveBeenCalled();
-    });
-
-    it('should skip calling if target is removed already', () => {
-      const callback = jest.fn();
-      monitorResize(element, callback);
-      element.remove();
-      observer.triggerResize();
-      jest.runAllTimers();
-      expect(callback).not.toHaveBeenCalled();
-    });
-  });
-});
diff --git a/tsconfig.json b/tsconfig.json
index 9e4d9bf..22fce2e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
       "@@/*": [
         "src/.umi/*"
       ],
-      "rc-align": [
+      "@rc-component/context": [
         "src/index.ts"
       ]
     }