react

This won’t work;

plaintext
import React, { ReactNode } from 'react';

This will;

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

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

javascript
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

• Docs
• A real example

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

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

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

Difference between Shallow, Mount and render of Enzyme