3 ms·

Hmm, I don’t really agree on this one. Just a day ago I’ve added a totally not vdom, stateful component that was mutating DOM and adding nodes on it’s own to fi

Hmm, I don’t really agree on this one. Just a day ago I’ve added a totally not vdom, stateful component that was mutating DOM and adding nodes on it’s own to fix performance problems with critical part of the app that required instant feedback to user typing. React was not bothered at all. From the start there were ways to escape React model in components and integrate components into other frameworks. Been there, done that, it was never a huge deal.

crate_barre 5y ago
Can you describe what you did? Breaking out of React for rendering means you are in deep shit. In fact, I’d love to see the hoops you jumped through, which I’m certain you will brush away as ‘not a big deal’. But I am an American, so I won’t put up with any inconvenience and don’t consider it virtuous to do so (we fought a war over a tea tax after all). But I’ll take a wild guess: A bunch of useRefs? I’m excited to hear all of this.
- notshift 5y ago
  React only re-renders a component if the state changes, the props change, or a parent component re-renders. In my app, I only have one component where I needed to break out of the vdom, and none of the parent tree ever re-rendered (except when navigating to a new page, which correctly tears down the component), so it was as simple as just one useRef to grab a reference and one useEffect to pass it to my other code after the component rendered.
  - crooked-v 5y ago
    A pretty straightforward pattern here (and one that I actually just implemented with no hiccups for a non-React animation library) looks like: import { useEffect, useRef } from 'react'; import { Controller } from 'some-animation-library'; const SomeWrapperComponent = ({ options }) => { const elementRef = useRef(null) const controllerRef = useRef(null) useEffect(() => { if (!elementRef.current) { return () => {} } if (!controllerRef.current) { controllerRef.current = new Controller(elementRef.current, options) } else { controllerRef.current.setOptions(options) } return () => { controllerRef.current.doSomeCleanup() } }, [options]) return <div ref={elementRef}></div> }
    - crate_barre 5y ago
      Thanks, that’s exactly the simplicity I wanted you to share, you did good.
- szastamasta 5y ago
  The most recent thing was the typing app where we had to change style if each character after user typed it. With long texts (10k of characters) performance of tree diffing was not acceptable (especially in Safari) so we replaced whole text component with manually managed DOM and were mutating nodes directly. I’ve been using React for quite some time (started with version 0.11 or something) and had to integrate quite a few libraries on my own (stuff like OpenLayers for maps, etc) and it also worked pretty well. Also made few apps that had only few widgets (search UI, calendar, etc). It usually worked quite well. Mixing React with non React is quite easy. You only need to encapsulate it - keep all non vdom stuff in one component and never escape single DOM node.
dragonwriter 5y ago
Yeah, that's been my experience, too, for instance in one of my toy projects dropping a rotjs game display into a React app.

crate_barre 5y ago

Can you describe what you did? Breaking out of React for rendering means you are in deep shit. In fact, I’d love to see the hoops you jumped through, which I’m certain you will brush away as ‘not a big deal’. But I am an American, so I won’t put up with any inconvenience and don’t consider it virtuous to do so (we fought a war over a tea tax after all). But I’ll take a wild guess: A bunch of useRefs? I’m excited to hear all of this.

notshift 5y ago
React only re-renders a component if the state changes, the props change, or a parent component re-renders. In my app, I only have one component where I needed to break out of the vdom, and none of the parent tree ever re-rendered (except when navigating to a new page, which correctly tears down the component), so it was as simple as just one useRef to grab a reference and one useEffect to pass it to my other code after the component rendered.
- crooked-v 5y ago
  A pretty straightforward pattern here (and one that I actually just implemented with no hiccups for a non-React animation library) looks like: import { useEffect, useRef } from 'react'; import { Controller } from 'some-animation-library'; const SomeWrapperComponent = ({ options }) => { const elementRef = useRef(null) const controllerRef = useRef(null) useEffect(() => { if (!elementRef.current) { return () => {} } if (!controllerRef.current) { controllerRef.current = new Controller(elementRef.current, options) } else { controllerRef.current.setOptions(options) } return () => { controllerRef.current.doSomeCleanup() } }, [options]) return <div ref={elementRef}></div> }
  - crate_barre 5y ago
    Thanks, that’s exactly the simplicity I wanted you to share, you did good.
szastamasta 5y ago
The most recent thing was the typing app where we had to change style if each character after user typed it. With long texts (10k of characters) performance of tree diffing was not acceptable (especially in Safari) so we replaced whole text component with manually managed DOM and were mutating nodes directly. I’ve been using React for quite some time (started with version 0.11 or something) and had to integrate quite a few libraries on my own (stuff like OpenLayers for maps, etc) and it also worked pretty well. Also made few apps that had only few widgets (search UI, calendar, etc). It usually worked quite well. Mixing React with non React is quite easy. You only need to encapsulate it - keep all non vdom stuff in one component and never escape single DOM node.

dragonwriter 5y ago

Yeah, that's been my experience, too, for instance in one of my toy projects dropping a rotjs game display into a React app.