facebookexperimental/Recoil

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

开放

#1,910 创建于 2022年7月16日

 (1 条评论) (0 个反应) (0 位负责人)JavaScript (1,151 个派生)batch import
help wanted

仓库指标

星标
 (19,428 个星标)
PR 合并指标
 (30 天内没有已合并 PR)

描述

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>
);

贡献者指南