WIP

Best Practices

Manipulating the DOM and Server Side Rendering (SSR)

Many integrations will want to directly manipulate the DOM. They typically need a target element that they can insert something into. You can often just set a ref on the element and use that. But sometimes the library expects a unique query selector. You can use the id of the node to create a stable element selector:

export default function MyComponent({ id }) {

	const elementId = `my-element-${id}`

	React.useEffect(() => {
    const element = document.querySelector(`#{elementId}`)
		if (element) { ... }
  })

	return <div id={elementId} />
}