react

This won’t work;

import React, { ReactNode } from 'react';

This will;

import React from 'react';
import type { Node } from 'react';

import { saveAs } from "file-saver";

export default () => {
  const fileUpload = useRef<HTMLInputElement>(null);

  const exportQuestions = () => {
    const fileName = "questions.json";
    const fileToSave = new Blob([JSON.stringify(questions, null, 4)], {
      type: "application/json",
    });
    saveAs(fileToSave, fileName);
  };

  const importQuestions = () => {
    if (null !== fileUpload.current) {
      const file = fileUpload.current.files![0];
      if (file) {
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = (evt: ProgressEvent<FileReader>) => {
          if (evt.target && typeof evt.target.result === "string") {
            console.log(JSON.parse(evt.target.result));
          }
        };
      }
    }
  };

  return (
    <input
      ref={fileUpload}
      type="file"
      id="file-upload"
      accept="application/json"
      className={classes.file}
      onChange={() => importQuestions()}
      style={{ display: "none" }}
    />
  );
};

• Using files from web applications
• QuestionList.tsx

Use hooks and mock them instead;

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useParams: () => ({
    myRoute: 'some-route-value',
  }),
}));

To prepare a component for assertions, wrap the code rendering it and performing updates inside an act() call. This makes your test run closer to how React works in the browser.

• Hacky workaround
• Nicer workaround

Redux maintainer Mark Erikson answers a number of questions about the future of Redux

• Docs
• A real example

useEffect(() => {
  const interval = setInterval(() => {
    console.log("This will run every second!");
  }, 1000);
  return () => clearInterval(interval);
}, []);

Performance optimizations are not free. They ALWAYS come with a cost but do NOT always come with a benefit to offset that cost.

Therefore, optimize responsibly.

When to useMemo and useCallback by Kent C. Dodds

If the only reason why you want to extract your inline functions in props into useCallback is to avoid re-renders of children components: don’t. It doesn’t work.

How to write Performant React code: rules, patterns, do’s and don’ts by Nadia Makarevich

Difference between Shallow, Mount and render of Enzyme