SebastianHGonzalez

import { useState, useEffect } from "react";
import { useRouter } from "next/router";

type IParam = string;
type IValue = string | string[] | number | number[] | null | undefined;
type IState = { [k: string]: IValue };
type IQuery = IState;
type IRoute = string;

function isEmpty(value: IValue): boolean {

slikts

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

slikts

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

• Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
• Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

baryla

import { useStore, Store } from "vuex";

interface InternalModule<S, A, M, G> {
  state: S;
  actions: A;
  mutations: M;
  getters: G;
}

/**

eduardoflorence

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(GetMaterialApp(
    debugShowCheckedModeBanner: false,
    initialRoute: '/home',
    defaultTransition: Transition.fade,
    getPages: [
      GetPage(

ramirezsandin

import { useRouter } from "next/router";
import { ParsedUrlQuery } from "querystring";

interface UseRouterParamsOptions {
  method?: "push" | "replace";
  shallow?: boolean;
}

const useRouterParams = (options?: UseRouterParamsOptions) => {
  const { query, pathname, push, replace } = useRouter();