useCreateViewState

import { useState } from 'react'

import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} from '@jbrowse/react-linear-genome-view2'

function GenomeView() {
  const state = useCreateViewState({
    assembly: {
      name: 'volvox',
      uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
    },
    tracks: [
      {
        trackId: 'volvox_gff3',
        name: 'Volvox genes',
        uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
      },
    ],
    location: 'ctgA:1105..1221',
  })
  return state ? <JBrowseLinearGenomeView viewState={state} /> : null
}

export default function UseCreateViewState() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>
        Parent render count: {count} — clicking the button triggers a parent
        re-render, but the genome view state is preserved because{' '}
        <code>useCreateViewState</code> creates the state only once.
      </p>
      <button
        onClick={() => {
          setCount(c => c + 1)
        }}
      >
        Re-render parent
      </button>
      <GenomeView />
    </div>
  )
}