overmind/packages/overmind-website/examples/api/components_useEffect.ts at webfixes · hipertracker/overmind · GitHub

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
export default (ts) =>
  ts
    ? [
        {
          code: `
import { h, Component, useEffect } from 'overmind-components'

const MyComponent: Component = () => {
  useEffect(() => {
    console.log('I run on every render')
  })

  return <h1>Hello</h1>
}
`,
        },
        {
          code: `
import { h, useEffect } from 'overmind-components'

const MyComponent: Component = () => {
  useEffect(() => {
    const onVisibilityChange = () => {
      console.log('I am registered once, and unregistered on component unmount')
    }
    document.addEventListener('visibilitychange', onVisibilityChange)

    return () => {
      document.removeEventListener('visibilitychange', onVisibilityChange)
    }
  }, [])

  return <h1>Hello</h1>
}
`,
        },
        {
          code: `
import { useEffect } from 'overmind-components'

const MyComponent: Component = ({ state }) => {
  useEffect(() => {
    console.log('I run initially and whenever the title changes')
  }, [state.title])

  return <h1>Hello</h1>
}
`,
        },
      ]
    : [
        {
          code: `
import { useEffect } from 'overmind-components'

const MyComponent = () => {
useEffect(() => {
  console.log('I run on every render')
})

return <h1>Hello</h1>
}
`,
        },
        {
          code: `
import { useEffect } from 'overmind-components'

const MyComponent = () => {
useEffect(() => {
  const onVisibilityChange = () => {
    console.log('I am registered once, and unregistered on component unmount')
  }
  document.addEventListener('visibilitychange', onVisibilityChange)

  return () => {
    document.removeEventListener('visibilitychange', onVisibilityChange)
  }
}, [])

return <h1>Hello</h1>
}
`,
        },
        {
          code: `
import { useEffect } from 'overmind-components'

const MyComponent = ({ state }) => {
useEffect(() => {
  console.log('I run initially and whenever the title changes')
}, [state.title])

return <h1>Hello</h1>
}
`,
        },
      ]