facebookexperimental/Recoil

<RecoilURLSync doesn't throttle calls to history.replace / history.pushState w/ Safari

Open

#1.910 geöffnet am 16. Juli 2022

Auf GitHub ansehen
 (1 Kommentar) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (19.428 Stars) (1.151 Forks)batch import
help wanted

Beschreibung

With Safari, if you call history.replace or history.pushState too frequently, the history APIs will throw a SecurityError.

SecurityError: Attempt to use history.replaceState() more than 100 times per 30 seconds

example code to reproduce:

import * as React from "react";
import ReactDOM from "react-dom/client";
import { RecoilRoot, atom, useRecoilState } from "recoil";
import { RecoilURLSyncJSON, syncEffect } from "recoil-sync";
import { string } from "@recoiljs/refine";

const textState = atom({
  key: "textState", // unique ID (with respect to other atoms/selectors)
  default: "", // default value (aka initial value)
  effects: [syncEffect({ refine: string() })],
});

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

export default function App() {
  return (
    <div>
      <TextInput />;
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <RecoilURLSyncJSON location={{ part: "queryParams" }}>
        <App />
      </RecoilURLSyncJSON>
    </RecoilRoot>
  </React.StrictMode>
);

Contributor Guide