65 |
66 | ## Test scenario
67 |
68 | - With useTransition
69 | - Level 1
70 | - 1: No tearing finally on update
71 | - 2: No tearing finally on mount
72 | - Level 2
73 | - 3: No tearing temporarily on update
74 | - 4: No tearing temporarily on mount
75 | - Level 3
76 | - 5: Can interrupt render (time slicing)
77 | - 6: Can branch state (wip state)
78 | - With useDeferredValue
79 | - Level 1
80 | - 7: No tearing finally on update
81 | - 8: No tearing finally on mount
82 | - Level 2
83 | - 9: No tearing temporarily on update
84 | - 10: No tearing temporarily on mount
85 |
86 | ## Results
87 |
88 | {count}
;
76 | });
77 |
78 | const DeferredCounter = componentWrapper(() => {
79 | const count = useDeferredValue(useCount());
80 | syncBlock();
81 | return {count}
;
82 | });
83 |
84 | const Main = mainWrapper(() => {
85 | const [isPending, startTransition] = useTransition();
86 | const [mode, setMode] = useState(null);
87 | const transitionHide = () => {
88 | startTransition(() => setMode(null));
89 | };
90 | const transitionShowCounter = () => {
91 | startTransition(() => setMode('counter'));
92 | };
93 | const transitionShowDeferred = () => {
94 | startTransition(() => setMode('deferred'));
95 | };
96 | const count = useCount();
97 | const deferredCount = useDeferredValue(count);
98 | useCheckTearing();
99 | const increment = useIncrement();
100 | const doDouble = useDouble();
101 | const transitionIncrement = () => {
102 | startTransition(increment);
103 | };
104 | const timer = useRef();
105 | const stopAutoIncrement = () => {
106 | clearInterval(timer.current);
107 | };
108 | const startAutoIncrement = () => {
109 | stopAutoIncrement();
110 | timer.current = setInterval(increment, 50);
111 | };
112 | return (
113 |
114 |
117 |
120 |
123 |
126 |
129 |
132 |
135 |
138 | {isPending && 'Pending...'}
139 |
145 | );
146 | });
147 |
148 | const App = () => (
149 | Counters
140 | {mode === 'counter' && ids.map((id) =>Main
143 |{mode === 'deferred' ? deferredCount : count}
144 | | Test | ${Array.from(Array(numTests).keys()).map((i) => `${i + 1} | `).join('')}
|---|
([\s\S]*?)<\/details>/,
80 | `
\n
`,
81 | );
82 |
83 | fs.writeFileSync('./README.md', readme);
84 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 |
5 | module.exports = {
6 | mode: 'production',
7 | entry: './src/index.js',
8 | output: {
9 | path: path.join(__dirname, 'dist', process.env.NAME || 'react-redux'),
10 | filename: '[name].js',
11 | },
12 | plugins: [
13 | new webpack.DefinePlugin({
14 | __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
15 | }),
16 | new webpack.EnvironmentPlugin({
17 | NAME: '',
18 | }),
19 | new HtmlWebpackPlugin({
20 | template: './public/index.html',
21 | }),
22 | ],
23 | module: {
24 | rules: [{
25 | test: /\.jsx?$/,
26 | resolve: {
27 | fullySpecified: false,
28 | },
29 | exclude: /node_modules\/(?!(@apollo)\/).*/,
30 | use: [{
31 | loader: 'babel-loader',
32 | options: {
33 | presets: [
34 | ['@babel/preset-env', { modules: false }],
35 | '@babel/preset-react',
36 | ],
37 | },
38 | }],
39 | }],
40 | },
41 | devServer: {
42 | port: process.env.PORT || '8080',
43 | historyApiFallback: true,
44 | },
45 | };
46 |
--------------------------------------------------------------------------------