Hacker News new | comments | ask | show | jobs | submit login

I've been thinking about it some. The pattern seems easy enough to entirely split view functions from hook logic. Using the usual counter example:

    export function counterView (count) {
      return <span>{ count }</span>
    }

    export function Counter () {
      const [count, setCount] = useState(0)
      // … useEffect to setInterval count or whatever
      return counterView(count)
    }
At this point, though the question becomes is this pattern buying you anything? Pure view functions should be easier to test, but React testing library's act() tool looks like it isn't that much more painful to just test the full component. Similarly, pure view functions are potentially easier to reuse with different "component logic", but I'm unsure how often that would be the case.

It's maybe a bit clearer as a pattern where the "stateful" and "stateless" stuff may be than mixing the two, and certainly seems like it might help make it easier to follow the "Hook rules" (most of your loops and conditionals should be inside the "pure" function). But it's potentially also just a source for extra noise/boilerplate.

Like I said, I'm still thinking about it, and something I expect to explore in an actual codebase at some point.






Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: