📦 j-piasecki / react-freeze-repro

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125import React, {useEffect} from 'react';
import {Freeze} from 'react-freeze';

const listeners = [];

function addListener(listener) {
  listeners.push(listener);

  return () => {
    const index = listeners.indexOf(listener);
    listeners.splice(index, 1);
  };
}

let test = true;

function ComponentWithLayout() {
  const [a, setA] = React.useState(0);

  React.useEffect(() => {
    console.log('Test Mount');

    return () => {
      console.log('Test Unmount');
    };
  }, []);
  console.log('Test render');

  if (test) {
    queueMicrotask(() => {
      console.log('Test sdfasdfasdf');
      setA(1);
    })
    test = false;
  }

  return (
    <div
      style={{width: 100, height: 100, backgroundColor: 'blue'}}
    >
      <span>{a}</span>
    </div>
  );
}

function DelayedRender(props) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    console.log('DelayedRender immediate');
    setVisible(true);

    listeners.forEach(listener => listener());
  }, []);

  if (visible) {
    console.log('DelayedRender done');
    return props.children;
  } else {
    console.log('DelayedRender waiting');
    return null;
  }
}

function FreezeComponent({frozen}) {
  return (
    <div style={{width: 100, height: 100}}>
      <Freeze freeze={frozen}>
        <div style={{width: 100, height: 100, backgroundColor: 'red'}} />
      </Freeze>
    </div>
  );
}

function DelayedComponent({visible}) {
  return (
    <div style={{width: 100, height: 100}}>
      {visible && (
        <DelayedRender>
          <ComponentWithLayout />
        </DelayedRender>
      )}
    </div>
  );
}

function FreezeTest() {
  const [frozen, setFrozen] = React.useState(false);
  const [visible, setVisible] = React.useState(false);

  useEffect(() => {
    const unsubscribe = addListener(() => {
      setFrozen(!frozen);
      console.log('freezed:', !frozen);
    });

    return () => {
      unsubscribe();
    };
  }, [frozen]);

  return (
    <div style={{flex: 1}}>
      <div style={{height: 100, flexDirection: 'row'}}>
        <FreezeComponent frozen={frozen} />
        <DelayedComponent visible={visible} />
      </div>

      <input
          type="button"
          value="Do the thing"
          onClick={() => {
            setVisible(!visible);

            if (visible) {
              setFrozen(false);
            }
          }}
        />
    </div>
  );
}

export default FreezeTest;