score:0
a) memoizing is always faster in my tests (despite some blog posts saying otherwise). having said that you're not going to see any noticeable gains unless you have a particularly heavy component, or the component is rendering lots of children. it could also save you from loosing focus if you're typing and that input gets re-rendered because the parent does.
b) in short none of them will work, react.memo
has to sit outside the render function, it's not part of the "magic" use
hook functions which maintain references. you have to use usememo
for inside render. here's an example: the components which don't re-render every second are ccomponent
and dcomponent
:
const ccomponent = react.memo(({ count }) => (
<p>not re-rendered every second: {count}</p>
));
const maincomponent = (props) => {
const acomponent = react.memo(() => (
<p>re-render when parent does: {props.count}</p>
));
const bcomponent = react.memo(({ count }) => (
<p>re-render when parent does: {count}</p>
));
const dcomponent = react.usememo(() => (
<p>not re-rendered every second: {props.count}</p>
), [props.count]);
return (
<div>
<acomponent />
<bcomponent count={props.count} />
<ccomponent count={props.count} />
{dcomponent}
<p>parent count: {props.count}</p>
<p>parent anothercounter: {props.anothercounter}</p>
</div>
);
};
function app() {
const [count, setcount] = react.usestate(0);
const [anothercounter, setanothercounter] = react.usestate(100);
react.useeffect(() => {
const h = setinterval(() => {
setcount((c) => c + 1);
}, 6000);
const h2 = setinterval(() => {
setanothercounter((c) => c + 1);
}, 1000);
return () => {
clearinterval(h);
clearinterval(h2);
};
}, []);
return (
<div classname="app">
<maincomponent count={count} anothercounter={anothercounter} />
</div>
);
}
reactdom.render(<app />, document.queryselector('#container'));
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="container"></div>
score:0
i used the memo in a little experiment, i upload the pictures maybe it will be useful.
title.js:
app.js:
Source: stackoverflow.com
Related Query
- Does declaring a React.memo inside another functional component provide the memoization performance as it is intended?
- React anti pattern, defined a component inside the definition of another component
- Too many re-renders. React limits the number of renders to prevent an infinite loop. Updating state of a functional component inside the render method
- React Router "Link to" does not load new data when called from inside the same component
- Why does my React component remain in the DOM after navigating to another page?
- How to link to Routes inside the component rendered by another Route with React Router
- React call from class to functional component. Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- React functional component using the `useState` hook does not update onChange using ReactiveSearch
- Unable to provide react component method as prop callback to another functional component
- React Redux, my component is not connected to Redux Store. I tested the action and reducer in another component, it does work for other components?
- Why the following react functional component does not work properly?
- React share all methods inside a function component that might interact with the state between another function component
- React - Get displayName of functional component inside the component?
- Why does react display my functional component at the bottom of my page?
- Test the methods inside a functional component using react
- socket connect event inside useEffect does not work when component is created but works after refreshing the page in React
- React functional component inside a loop calls api only returns the response for last element passed on api
- How to pass in a react component into another react component to transclude the first component's content?
- Using async/await inside a React functional component
- React Hooks Error: Hooks can only be called inside the body of a function component
- React Warning: Cannot update a component from inside the function body of a different component
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- Function inside functional component in React hooks - Performance
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- Does react re-render the component if it receives the same value in state
- How to initialize the react functional component state from props
- Why does React warn me against binding a component method to the object?
- How to update the state of a sibling component from another sibling or imported component in REACT
- React - Triggering a component method from another component, both belonging in the same render()
More Query from same tag
- My React app is using values from the .env file instead of the .env.local file
- Most efficient way to replace string with emoji
- Error "SyntaxError: Cannot use import statement outside a module" when deploying React app with Netlify Functions
- how to separate coma in json result ( React Js)
- how to pass className to svg in styled components
- get values of row-inputs in table React
- what will be best Approach for Redux-thunk Async Request to handle onSuccess and onError?
- data.json is not a function error
- Disable warning message for eslint rule not being found
- Replace or add Material Ui class names to React Data Table Component class names
- How to put React component inside HTML string?
- How to call private funtions in utility functions in ReactJS
- Next.js with MongoDB and Mongoose throws 500 Internal Server Error when deploy it on Vercel
- How do i implement a dropdown header in Material-ui in react?
- React: array value are undefined in map()
- Where to put `componentWillMount` initialisation function that modifies state?
- iOS rotate photo issue
- Axios POST does not recognize the data being passed in from react
- Firebase Cloud Function onRequest using CORS not returning return error correctly
- How to display two react components
- How to disable multiple axios.post?
- this.setState is only pulling last value in array
- Interference in data retrieval
- Can't precisely decipher error: TypeError: path must be absolute or specify root to res.sendFile at ServerResponse.sendFile
- Reload a script in componentDidMount()
- react-dropzone: inspect files while dragging is active
- Access child state of child from parent component in react
- Semantic UI React dropdown does not set the value onChange: React+ Typescript
- How do I hide an element, on specific pages only on small screens without having to refresh webapp?
- How to show a component n times in React Native