2

I have this State;

const [kila, setKila] = useState({
    kilaBool: false,
    kilaName: "",
  ....
  });

Do I need to do restructuring for the purity of the code,or better to leave it as it is and improve performance.can anyone checked in practice. Thank you in advance.

restructuring ES6

const {kilaBool, kilaName} = kila;
Mohammad Reza Shahrestani
  • 1,119
  • 3
  • 17
  • 28
  • If the code is easy to understand, then leave it alone. If it's just too much code on the page, maybe extract some of it into a different file without altering the structure. Sometimes large amounts of state are better handled in the useReducer hook, but that can add complexity, especially if you don't name things well. – Dov Rine Jul 15 '19 at 02:49
  • @Dov Rine I would like to know how this all affects performance?.Any chart or something like that. Where can I see? –  Jul 15 '19 at 11:25
  • 2
    I don't have any metrics for you, but development costs are often more expensive tham minor performance improvements. Unlwss tou have an actual performance problem, the only refactoring that I would do is to improve maintainability. – Dov Rine Jul 15 '19 at 12:20
  • The best way to figure out if some code change is going to improve performance is to measure performance before and after the change. Questions like this are rarely helpful as they get people focused on the wrong thing (micro-optimizing nanoseconds of code) rather than what's important (ensuring your state structure is reasonably sized, your code can be read and understood easily, etc.). – Heretic Monkey Jul 15 '19 at 12:46

1 Answers1

0

Object and array destructuring are somewhat "costly", but compared to the extra logic that react puts into stitching the DOM and managing these hooks it's nothing and well worth the bit extra memory allocated for readability.

It's only costly since you have to declare new local variables (kilaBool, kilaName).

i.e this:

const [kila, setKila] = useState(...);
const {kilaBool, kilaName} = kila;

is just a fancy way to write this:

const hookValues = useState(...);
const kila = hookValues[0];
const setKila = hookValues[1];

const kilaBool = kila.kilaBool;
const kilaName = kila.kilaName;

For extra information about destructuring and memory usage read this

In most cases putting readability over performance is completely fine, destructure because it's cleaner and easier to read later on by other developers.

Liron Navon
  • 1,068
  • 1
  • 11
  • 22