Input changes cause unrelated elements to re-render

Developer Support
1

I’ve got the following page component, with a dummy placeholder div and a textInput element. Whenever there is a new input, even the placeholder component is rerendering. I experience slowness for larger pages and this is probably one of the reasons.

I don’t know how the loader works under the hood but I’m surprised about this behavior. Is that intended?
What is the best practice when it comes to adding states to an entire page with dozens of components?

const PlasmicPage = (props: { pageMeta: any }) => {
  const { pageMeta } = props
  const [value, setValue] = React.useState("")

  const onChange = (e: any) => {
    const newValue = e?.target?.value
    setValue(newValue)
    console.log("onChange")
  }
  console.log("render page")

  return (
    <PlasmicComponent
      component={pageMeta.displayName}
      componentProps={{
        placeholder: {
          render: () => {
            console.log("render placeholder")
            return <p>hello</p>
          },
        },
        textInput: {
          props: {
            value,
            onChange,
          },
        },
      }}
    />
  )
}

“@plasmicapp/loader-gatsby”: “1.0.203”,
“gatsby”: “4.16.0”,
“react”: “18.2.0”,

image.png

image.png
image.png1276×656 38.2 KB

2

Hi @mighty_donkey! I don’t think the re-rendering in this case is related to loader-gatsby, but it’s just React default behavior: a component is rendered when its state changes. If you want to keep your state in sub-components instead of in the page root, you can use component substitution: https://docs.plasmic.app/learn/substitutions/

3

Okay thanks. Indeed this is how React works by default.

My issue with substitution is that I cannot substitute a specific instance of a component, can I? I can only substitute all instances of a given component.
I want instance1 to have a different behavior than instance2, how would I achieve that?
A workaround would be to create new components for each use case, but this would clutter my project with too many components