Questions tagged [react-usememo]

169 questions
1
vote
4 answers

Best way to create & destroy a thing exactly once in React? (Are unused setters from usestate okay?)

I have a giant game object which is attached to a canvas on render. I want to create it exactly once when the component is created, and not delete it until the component is destroyed. (If the game is periodically created and destroyed then users…
Luke Miles
  • 941
  • 9
  • 19
1
vote
0 answers

How can I update specific React Components in a grid without updating every component?

I am creating a grid of HTML elements which each correspond to a 'Node' react component and are held within a parent 'Visualiser' react component. Code is seen below. A 2D array of objects holding each Node's data is created with useState in the…
1
vote
1 answer

Is this incorrect use of useCallback and useMemo?

When should we worry about functional components redefining variables and functions?? I think this first case is clearly unnecessary, functions is not expensive to create(and the react dev tools profile test didn't detect performace change with…
pavaj93490
  • 81
  • 1
  • 5
1
vote
1 answer

FlatList items re-rendering even with React.memo

I am trying to render a list of items in React Native with the FlatList component but every time I fetch new data it re-renders the who list of items even with React.memo. Here is what my code looks like: const data = [ { _id: 1, text: 'Hello…
blouuuu
  • 454
  • 1
  • 4
  • 16
1
vote
1 answer

Rendering Async values with ReactMemo

I am currently working on a little project that involves me using react memo with an external package(react-tables). slight hiccup being that some of the data to be used for the table data is gotten from an API and it throws an error on first load.…
Chidex
  • 139
  • 2
  • 10
1
vote
0 answers

How to memoize the value from a custom useContext hook in React?

What I need: In my component I need to show a loading spinner when a value from useContext changes. I found a solution but I do not really like it. const MyComponent = () => { const { stateDB } = useDB // custom useContext hook // stateDB is…
Nichita
  • 11
  • 1
  • 2
1
vote
0 answers

Re-rendering of Google Maps Elevations API responses within React functional component

I am writing an app for vehicle tracking. With the help of Google Maps API, I am able to get directions and extract all the required info. The problem appeared with Elevations API responses. From DirectionRender class I am sending path and distance…
1
vote
1 answer

React Navigation v5 Authentication Flows (Screens as Different Files)

If we see in the doc example: https://reactnavigation.org/docs/auth-flow/ : function SignInScreen() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const { signIn } =…
Jeaf Gilbert
  • 11,495
  • 19
  • 78
  • 105
1
vote
1 answer

Want to set state once on first render without causing uneccessary re-renders on further updates

I have a MarketOverview component that renders a bunch of cryptocurrency trading pair markets. On initialisation, I want it to render the BTC/USD market by default, which I'm doing via useEffect(). The problem is the defaultMarket gets called on…
doctopus
  • 5,349
  • 8
  • 53
  • 105
0
votes
3 answers

I am Wondering if this useEffect Actually Only Runs When the useMemo has Nothing in it

So, I am wondering if this makes sense at all. I am trying to cache the data/users when the data is fetched with Axios, but make this useEffect run only when cachedUsers.length has no length. Does this have any propose or is there a better way to do…
dBish6
  • 21
  • 1
  • 2
0
votes
1 answer

React Typescript: How do I useMemo for a checkbox value?

I'm currently working on a to do list project using React and Typescript. Right now I am able to add a new to do item using a form and delete each to do item. Each to do item has a checkbox with a boolean value. What I would like to do is filter…
0
votes
1 answer
0
votes
0 answers

React context api using memo to prevent rerendering

I have a context provider that I use like this: function PageWrapper() { const { caseNumber } = useParams<{ caseNumber?: string }>(); return (
Ludwig
  • 1,401
  • 13
  • 62
  • 125
0
votes
1 answer

How to prevent a new array from being created everytime react page refreshes

I am trying to maintain a value of an array, arr, in a react component and I do not want a new array to be created with every render. That is because, I am setting arr as a dependency in useMemo(), and I do not want the callback function in useMemo…
M.A.G
  • 559
  • 2
  • 6
  • 21
0
votes
1 answer

How can I only assign a previous value to state of my datepicker if the new one is invalid?

I am dealing with a bug in a library I'm using that will sometimes create invalid values that my code will need, crashing the page. I would like to only apply that new value (the result of useDateRangePickerState) if it is valid. If not, I do not…
Devstar34
  • 1,027
  • 2
  • 21
  • 47