PREVENT_RERENDER.md

<- to the main page

Preventing unwanted renders

You can make the hook update the component only when specific fields have been changed. Just pass an array of the fields or an empty array if you want it to fire only once.

// component.jsx

import React from 'react'
import { useMyHook1, useMyHook2 } from './hooks.js'

export const Component = () => {
  // Component will be updated only when 'value' has changed regardles of changing any other fields inside 'useMyHook1'
  const hookData1 = useMyHook1(['value'])

  // Component will not be updated when any field is changed in 'useMyHook2'
  const hookData2 = useMyHook2([])

  return (
    <div>
      {hookData1.value}
    </div>
  )
}

See more:

• Getting Started

---

• Using Storages
• Using Actions
• Using Selectors
• Caching
• Preventing Rerendering [you are here]
• Preventing Actions
• Autoset 'isPending'

---

• Typescript
• Adding Reducers
• Adding Middleware and DevTools

---

• Playground Repo
• Npm Package