React hooks about focal HOT 5 CLOSED

@rileyatodd that solution will work, but you will have problems when you decide to stop render {count} value into DOM and still updates it in the document.title.

@blacktaxi react hooks allow us to use a simpler solution then HOC:

function useSubscriptionTo(obs: Observable<unknown>): void {
  React.useEffect(
    () => {
      const subs = obs.subscribe()
      return () => subs.unsubscribe()
    },
    [obs]
  )
}

const setTitle = count => document.title = `You clicked ${count} times`

const Counter = () => {
  useSubscriptionTo(count.pipe(tap(setTitle)))

  return <F.p>You clicked {count} times</F.p>
}

from focal.

For this particular example, I think it would be better to just use an F.div like this:

import { F } from '@grammarly/focal'

// ...

const Counter = () => {
  const count = store.count

  return (
    <F.div>Count: {count}</F.div>
  )
}

I would appreciate if you could provide some other examples so I could get a sense of what kind of problem you are having.

from focal.

I guess I'm not really having any problems, just like the way hooks look 😅

But one use case could be using the result from useAtom in another hook, for example for updating the page title like they do at https://reactjs.org/docs/hooks-effect.html

import React from "react"
import { Atom, useAtom } from "@grammarly/focal"

// ...

const Counter = () => {
  const count = useAtom(count)
  
  useEffect(() => {
    document.title = `You clicked ${count} times`
  }, [count])

  return <p>You clicked {count} times</p>
}

(although that's probably a terrible use case)

from focal.

That's actually a pretty good use case, although not very common. There is an easy way to do this kind of thing just by subscribing to the atom observable:

count.subscribe(x => {
  document.title = `You clicked ${x} times`
})

The problem with this is that there's no clean up – we never unsubscribe from the observable. You can deal with this by having a special component that will manage the lifecycle of the side effect subscription. It's quite simple and could look like this:

class WithEffect extends React.Component<{ effect: () => Subscription }> {
  private _sub: Subscription | null = null

  private _unsubscribe() {
    if (this._sub) {
      this._sub.unsubscribe()
      this._sub = null
    }
  }

  componentDidMount() {
    if (this.props.effect) {
      this._sub = this.props.effect()
    }
  }

  componentDidUpdate() {
    if (this.props.effect) {
      this._unsubscribe()
      this._sub = this.props.effect()
    }
  }

  componentWillUnmount() {
    this._unsubscribe()
  }

  render() {
    return React.Children.only(this.props.children)
  }
}

// ...

const Counter = () =>
  <WithEffect effect={() => count.subscribe(x => `You clicked ${x} times`)}>
    <F.p>You clicked {count} times</F.p>
  </WithEffect>

Unfortunately this kind of utility component is not currently included in Focal.

from focal.

I think you could avoid managing the subscription yourself by leveraging the tap operator for the side effect.

const setTitle = count => document.title = `You clicked ${count} times`

const Counter = () =>
  <F.p>You clicked {count.pipe(tap(setTitle))} times</F.p>

from focal.