React hooks object update gets strange behaviour on Safari browser

Question

React hooks object update gets strange behaviour on Safari browser(only on Safari browser)

const [state, setState] = React.useState({
  show_welcome: true,
  show_inline: false,
  restriction: false,
  request_dp: false,
  prevent_rtl: false,
  lang: "ta"
});

setState

const handleToggle = ({ target }) => {
  setState(s => ({ ...s, [target.name]: !s[target.name] }));
};

Is there anything break the order of object for Safari browser 🤔

Answer 1

The reason this is happening is because it's re-rendering the array that you are using for the keys and the keys aren't in the same order as they were in the first render. You can see this by adding a console.log(state) just before the first return. Safari is more strict in this than Chrome or Firefox.

You can fix this by sorting the array before using it to render.

You can also fix this by changing your toggle function to something like this:

const handleToggle = ({ target }) => {
    const tempState = { ...state };
    tempState[target.name] = !tempState[target.name];
    setState(tempState);
  };