react

This won’t work;

        
javascript
        

            
        
     
import React, { ReactNode } from 'react';

This will;

        
python
        

            
        
     
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;

        
javascript
        

            
        
     
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

        
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

        
javascript
        

            
        
     
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