react

This won’t work;

import React, { ReactNode } from 'react';

This will;

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

Difference between Shallow, Mount and render of Enzyme

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

Use hooks and mock them instead;

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

• Docs
• A real example

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

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

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