React component doesn't rerender based onprops change

Question

I have pdf-viewer component

export default function PDFViewer({keyword}) {
    const searchPluginInstance = searchPlugin({
        keyword,
    })
    const {Search} = searchPluginInstance;
  return (
    <div>
        <Search/>
        <Viewer plugins={[searchPluginInstance]} />
    </div>
  )
}

keyword is an array of strings that are passed down to the component. That passed keyword list is highlighted in the pdf doc that is the function. But this works only for the first render cycle. After I update the keyword in the parent component and pass it here, nothing is happening.

Basically, once it creates the searchPluginInstance instance, It won't change based on the props changes. I don't know how to address thing issue? Is there a design pattern or something to handle this issue?

This is the libray

Answer 1

I think,

You should make sure that the keyword passed down to PDFViewer component has to be a react state if you want to rerender the PDFViewer when keyword state changes.

might be you are doing something like that -

function ParentComponent() {
   let keyword = [...]
   return (
     <PDFViewer keyword={keyword} />
   )
}

Try this -

function ParentComponent() {
   const [keyword, setKeyword] = setState(arr);
   return (
     <PDFViewer keyword={keyword} />
   )
}

Answer 2

It would be helpful to add the parent component code too so that we can check.

Some suggestions:

1. Make sure you are passing props that are new objects so React can detect the changes.
2. Try a stripped-down version of the parent and child component code and see if it works.