vzaidman

const [node, setRef] = useState(null);

useEffect(() => {
  if (!node) {
    console.log('unmounted!');
    return null;
  }
  
  console.log('mounted');
  

vzaidman

// the hook
function useRefWithCallback(onMount, onUnmount) {
  const nodeRef = useRef(null);

  const setRef = useCallback(node => {
    if (nodeRef.current) {
      onUnmount(nodeRef.current);
    }

    nodeRef.current = node;

vzaidman

// the hook
function useStateRef(processNode) {
  const [node, setNode] = useState(null);
  const setRef = useCallback(newNode => {
    setNode(processNode(newNode));
  }, [processNode]);
  return [node, setRef];
}

// how it's used

vzaidman

module.exports = require('../babel.config')

vzaidman

module.exports = {
  ...require('../jest.config'),
  rootDir: '..',
  cacheDirectory: '.cache/jest-cache-react-16',
  moduleDirectories: [
    '<rootDir>/test-react-16/node_modules',
    'node_modules'
  ]
}

vzaidman

{
  "private": true,
  "description": "Used to test react 16",
  "dependencies": {
    "react": "^16.14.0",
    "react-dom": "npm:@hot-loader/react-dom@^16.14.0",
    "react-is": "^16.13.1"
  }
}

vzaidman

module.exports = {
  // ...
  'setupFilesAfterEnv': [
    '<rootDir>/jestSetup.js'
  ],
  // ...
}

vzaidman

module.exports = {
  'cacheDirectory': '.cache/jest-cache',
  'modulePaths': ['<rootDir>/src'],
  'setupFilesAfterEnv': ['<rootDir>/jestSetup.js'],
  'moduleNameMapper': {
    '^@welldone-software/why-did-you-render$': '<rootDir>/src/whyDidYouRender.js'
  }
}

if(process.env.USE_REACT_16 === 'true'){

vzaidman

if(process.env.USE_REACT_16 === 'true'){
  jest.mock('react', () => {
    return jest.requireActual('react-16')
  })

  jest.mock('react-dom', () => {
    return jest.requireActual('react-dom-16')
  })

  jest.mock('react-dom/test-utils', () => {

vzaidman

{
  // ...
  "nollup": "^0.13.13",
  "react": "^17.0.1",
  //     ↓↓    ↓↓↓       ↓↓↓↓↓↓↓↓
  "react-16": "npm:react@^16.14.0",
  "react-dom": "npm:@hot-loader/react-dom@^17.0.0",
  //         ↓↓    ↓↓↓                       ↓↓↓↓↓↓↓↓
  "react-dom-16": "npm:@hot-loader/react-dom@^16.14.0",
  "react-hot-loader": "^4.13.0",