effect-component

effect-component

Effect component is a port of the React.useEffect hook into render props. Available for the people who don't want/can't migrate into hooks right away.

How does it works?

On the hook, you'll normaly write it as follows:

import React, { useEffect } from 'react'

const MyComponent = ({ counter }) => {
  useEffect(() => alert(`counter is now ${counter}`), [counter])

  return <div>Counter is {counter}</div>
}

With this package:

import React from 'react'
import EffectComponent from 'effect-component'

const MyComponent = ({ counter }) => {

  return <EffectComponent
    effect={() => alert(`counter is now ${counter}`)}
    checkValues={[counter]}
  >
    <div>Counter is {counter}</div>
  </EffectComponent>
}

API:

• checkValues: it works exactly as the 2nd parameter of React.useEffect. Leaving it unset will call effect on every render. Setting it into [] will only call it on mount, and setting a value will only call it when the value changes.

• effect: You pass the function to act here, it can also return a cleanup function if is needed.

• children: Optional children to render, if is needed