gaearon

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

• Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

gaearon

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

gaearon

If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

• We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
• We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method [depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/Jav

loonywizard

import React, { useEffect, useState } from 'react'

import { useThrottle } from './useThrottle'

export default function App() {
  const [value, setValue] = useState('hello')
  const throttledValue = useThrottle(value)

  useEffect(() => console.log(`throttledValue changed: ${throttledValue}`), [
    throttledValue,

loonywizard

import { useEffect, useRef, useState } from 'react'

function useThrottle<T>(value: T, interval = 500): T {
  const [throttledValue, setThrottledValue] = useState<T>(value)
  const lastExecuted = useRef<number>(Date.now())

  useEffect(() => {
    if (Date.now() >= lastExecuted.current + interval) {
      lastExecuted.current = Date.now()
      setThrottledValue(value)

rickyhaswifi

#https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router 
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

yunusga

# за редирект отвечает
# RewriteRule ^wp-content/uploads/(.*)$ https://<production site>/wp-content/uploads/$1 [R=302,NC,L]
# должна быть сразу после RewriteEngine On
# <wp test directory> необходим если сайт лежит в директории основного домена, например site.com/dev
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^wp-content/uploads/(.*)$ https://<production site>/wp-content/uploads/$1 [R=302,NC,L]
    # RewriteRule ^wp-content\/uploads\/(?!(2022\/08)\/)(.*)$ https://divina-bellezza.ru/wp-content/uploads/$2 [R=302,NC,L]
    RewriteBase /<wp test directory>/
    RewriteRule ^index\.php$ - [L]

ali-sabry

import { useState, useEffect } from 'react';

export const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

ali-sabry

//=== Custom Hook useMediaQuery
import { useState, useEffect } from 'react';

export const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    /* window.matchMedia() match if the media query you passed
       is match with current media query and return boolean value

Alimjanov-Ibragim

How to force a page to reload from server at browser launch with JavaScript

I spent weeks finding a way to refresh a page or a tab from the server once a user starts or restarts the browser. I was very surprised to find nothing about this topic.

Let's dig into the context, tries and the solution I came up with.

Context

Typically, once a user opens a browser and gets to a page, it directly provides the page in cache without refreshing any data from the server. Obviously, this only applies if the user is not in a private navigation.

In this case, as a user, I always need to open the browser and then manually reload the page to get the last updated data. What? Am I too lazy? Sure I am a developer!