devabhishekpal commented on code in PR #7100: URL: https://github.com/apache/ozone/pull/7100#discussion_r1727708465
########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx: ########## @@ -0,0 +1,563 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useCallback, useEffect, useState } from 'react'; Review Comment: Thanks for pointing this out. In the current implementation we will need to abstract out the function. Also since the calculation for the state is in an object, the dependent values i.e bucketName/name and volumeName will always be treated as a new object param. If we execute the below code in Node or console, we will see that object are called by ref rather than value, so even ``` x = { a: 1, b: 2 }; y = { a: 1, b: 2 } x == y; ``` It will return false, even though the value is the same. Hence on every load, even if the volumeName and bucketName remains the same, it will be treated as new object and trigger re-calculation which again becomes the same as current implementation with extra useMemo import. One way to avoid this is to create separate states for each object field. But in React v16 since state updates are not batched, having: ``` const [volumeName, setVolumeName] = useState(''); const [bucketName, setBucketName] = useState(''); ... ... const [owner, setOwner] = useState(''); const [acls, setAcls] = useState(); ``` and then calling setVolumeName, setBucketName, setOwner etc one by one is inefficient in React 16. That being said, once we upgrade to React 18, these updates are batched and then we can use useMemo to cache the calculation -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
