TypeScript - Autogenerated

Typescript repository

extension: ESLint
npm i -D prettier
npm i -D eslint-config-prettier eslint-plugin-prettier

package.json

{
  ...,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:prettier/recommended"
    ]
  },
  ...
}

.prettierrc.json

{
  ...,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:prettier/recommended"
    ]
  },
  ...
}

Build:

npm run build

Examples

• Reducer example - reducer is similar to use state. Instead of setState method should be dispatch and method allow for a more complex state management

type Action =
  | {
      type: 'initialize';
      name: string;
    }
  | {
      type: 'increment';
    };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'initialize':
      return { name: action.name, score: 0, loading: false };
    case 'increment':
      return { ...state, score: state.score + 1 };
    default:
      return state;
  }
}

 const [{ name, score, loading }, dispatch] = useReducer(reducer, {
    name: undefined,
    score: 0,
    loading: true,
  });

() => dispatch({ type: 'increment' })

• Ref example - direct reference to given object. React core components like button expose ref property, using it we can directly call html methods

<input ref={inputRef} type="text"></input>

function doSomething() {
  console.log('All properties and method sof the input', inputRef.current);
  inputRef.current?.focus();
}

useCallback vs useMemo

const memoizedCallback = useCallback(foo, []);
const memoizedResult = useMemo(foo, []);

memoizedCallback;
// ƒ foo() {
//   return 'bar';
// }
memoizedResult; // 'bar'
memoizedCallback(); // 'bar'
memoizedResult(); // 🔴 TypeError

• Components are re rendered when parents are rerendered, but usually it is not a problem, as in virtual DOM nothing happen and no changes to the browser will be applied. If we do not want to rerender childs we can use useMemo

export const ChildComponent = memo(() => {
  return <span>A child component</span>;
});