Effects

morphEffect registers a side effect that runs after render and re-runs when dependencies change.

Basic Usage

import { morphEffect, morphState } from 'morph'

export default function App() {
  const [count, setCount] = morphState(0)

  morphEffect(() => {
    console.log("Count changed:", count)
  })

  return (
    <body>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </body>
  )
}

The effect runs once after the initial render, then re-runs every time count changes.

Dependencies

Pass a dependency array as the second argument:

morphEffect(() => {
  console.log("name or age changed:", name, age)
}, [name, age])

No array — runs after every render
Empty array [] — runs once after initial render only
With deps — runs after initial render, then when any dep changes

Cleanup

Return a cleanup function from the effect:

morphEffect(() => {
  const timer = setInterval(() => {
    console.log("tick")
  }, 1000)

  return () => {
    clearInterval(timer)
  }
}, [])

The cleanup runs before the effect re-runs and when the component unmounts.

Common Patterns

Log state changes

morphEffect(() => {
  console.log("State:", { count, name, active })
})

Side effect on mount

morphEffect(() => {
  fetchInitialData()
}, [])  // empty deps = run once

Respond to specific changes

morphEffect(() => {
  if (userId) {
    loadUserProfile(userId)
  }
}, [userId])  // only re-runs when userId changes

Cleanup timers

morphEffect(() => {
  const id = setInterval(poll, 5000)
  return () => clearInterval(id)
}, [])