jstejada

jstejada

Member Since 9 years ago

@facebook,

Experience Points
138
follower
Lessons Completed
87
follow
Lessons Completed
527
stars
Best Reply Awards
38
repos

617 contributions in the last year

Pinned
⚡ :love_letter: An extensible desktop mail app built on the modern web. Forks welcome!
⚡ Typing animations with React
⚡ Relay is a JavaScript framework for building data-driven React applications.
⚡ dotfiles
⚡ :electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
⚡ juan -- jstejada.net
Activity
Nov
30
3 hours ago
Activity icon
issue

jstejada issue comment vercel/swr

jstejada
jstejada

Suspense and conditional fetching causing infinite rerenders

Discussed in https://github.com/vercel/swr/discussions/1651

Originally posted by rikutiira November 22, 2021 Hey, and first of all thanks for the great work on the library!

I'm new to SWR and I have been reading discussion & GH issues around this, and I'm still a bit unsure about how suspense and conditional fetching should work with the latest version (1.1.0-beta.9 at the time of writing this) so I was hoping to get some clarity around the issue 😄.

I'm having an infinite rerender issue when using suspense with conditional fetching from version 1.0.0 onwards (including current beta).

The SWR documentation on Suspense says that with conditional fetching, data should be undefined but with version 1.0.0+, it seems to fallback to the Suspense component instead and causes an infinite render loop where the useSWR hook is called. I'm new to suspense, but I suppose this is not expected behaviour?

  1. Am I doing something wrong in the code?
  2. Is the behaviour expected? If it is, how are you supposed to deal with conditional data fetching? Is there any additional documentation on the subject somewhere?

Here is a Codesandbox where you can test the issue: https://codesandbox.io/s/cold-dust-4dvzl?file=/src/App.js (uncomment response to run it). Here's the code as well:

import React, { useState, Suspense } from "react";
import useSWR from "swr";
import "./styles.css";

const fetcher = (str) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(str);
    }, 1000);
  });
};

const Test = (props) => {
  console.log("renders");

  const response = useSWR(props.str ?? null, fetcher, { suspense: true });

  return (
    <>
      <div>Data:</div>
      <pre>{JSON.stringify(response, null, 2)}</pre>
    </>
  );
};

export default function App() {
  const [str, setStr] = useState();
  return (
    <div className="App">
      <h1>SWR test</h1>
      <Suspense fallback={<div>loading...</div>}>
        <Test str={str} />
      </Suspense>
      <button onClick={() => setStr("hello world")}>Clicky</button>
    </div>
  );
}

Thanks! 🙇

jstejada
jstejada

ah got it, apologies, missed the original discussion and sandbox link

Nov
28
2 days ago
Activity icon
issue

jstejada issue comment jstejada/react-typist

jstejada
jstejada

str.match is not a function

image

import React from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus as colorscheme } from "react-syntax-highlighter/dist/cjs/styles/prism";
import Typist from "react-typist";

export function SrcContent({
  children,
  language,
}: {
  language: string;
  children: React.ReactNode;
}) {
  return (
    <SyntaxHighlighter language={language} style={colorscheme}>
      <Typist>{children}</Typist>
    </SyntaxHighlighter>
  );
}
jstejada
jstejada

is this error being thrown from within typist? i can't tell from the error stack

push

jstejada push jstejada/react-typist

jstejada
jstejada

prevent setting state when component not mounted (#79)

commit sha: 8febb02e4e854b2b743b79fc809d0482edb9bc36

push time in 1 day ago
pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

prevent setting state when component not mounted

I was having issues using this component with react-router. Whenever I navigated away from the page, my Typist component was unmounted (as expected) and a few seconds later the console logged the following warning:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Typist (created by TopSection)
    in h1 (created by TopSection)
    in div (created by TopSection)
    in div (created by FlexContainer)
    in FlexContainer (created by TopSection)
    in div (created by TopSection)
    in TopSection (created by Landing)
    in div (created by Landing)
    in Landing (created by Context.Consumer)

I added an additional check inside one of the setTimeout handlers, before trying to set the state of the unmounted component.

push

jstejada push jstejada/react-typist

jstejada
jstejada

Fix semver typo in package.json (#83)

This seems to be an unintended typo for a semver version, which can break some package managers.

commit sha: c97d09c25f84dbf6f8af0ce3bdcba679dfe90f19

push time in 1 day ago
pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

Fix semver typo in package.json

This seems to be an unintended typo for a semver version, which can break some package managers.

push

jstejada push jstejada/react-typist

jstejada
jstejada

Update README.md on dynamic content usage (#91)

commit sha: 618c3c04e8c8f16ec9e8ee7a41080c41463dd6db

push time in 1 day ago
pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

Update README.md on dynamic content usage

It is unclear how to use Typist with dynamic content. It is such a common use-case, to be able to use it with dynamic content.

https://github.com/jstejada/react-typist/issues/89

It for sure needs to be checked inside Typist component itself, but for now I propose to change docs to include the usage with dynamic content with the use of key prop so that it would be re-rendered every time.

push

jstejada push jstejada/react-typist

jstejada
jstejada

Allow passing rest of div props to div (#108)

commit sha: b26514d9a4a6e4c6ddff59dc56b2647309ff7789

push time in 1 day ago
pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

Allow passing rest of div props to div

This allows for setting things like aria tags

pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

add link to last version of Typist.css file

closes #101

pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

Bump path-parse from 1.0.5 to 1.0.7

Bumps path-parse from 1.0.5 to 1.0.7.

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

push

jstejada push jstejada/react-typist

jstejada
jstejada

Fix typo (#113)

Fixed a typo in your README text

commit sha: 8e9d21a63ee7e53e706228e507ce8b008c1c2ef2

push time in 1 day ago
pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

Fix typo

Fixed a typo in your README text

push

jstejada push jstejada/react-typist

jstejada
jstejada

Fix typo in Backspace (#114)

  • Easy to use backp<Typist.Delay ms={500} />sace
  • Changed to:
  • Easy to use backs<Typist.Delay ms={500} />pace

commit sha: 67ef8d0fda96b17d6338f72b264e9ba42890994f

push time in 1 day ago
pull request

jstejada pull request jstejada/react-typist

jstejada
jstejada

Fix typo in Backspace

  • Easy to use backp<Typist.Delay ms={500} />sace
  • Changed to:
  • Easy to use backs<Typist.Delay ms={500} />pace
pull request

jstejada pull request facebook/react

jstejada
jstejada

Fix typo

Summary

How did you test this change?

Activity icon
issue

jstejada issue comment facebook/react

jstejada
jstejada

Fix typo

Summary

How did you test this change?

jstejada
jstejada

my apologies, i misread the changes at first!

Activity icon
issue

jstejada issue comment vercel/swr

jstejada
jstejada

Suspense and conditional fetching causing infinite rerenders

Discussed in https://github.com/vercel/swr/discussions/1651

Originally posted by rikutiira November 22, 2021 Hey, and first of all thanks for the great work on the library!

I'm new to SWR and I have been reading discussion & GH issues around this, and I'm still a bit unsure about how suspense and conditional fetching should work with the latest version (1.1.0-beta.9 at the time of writing this) so I was hoping to get some clarity around the issue 😄.

I'm having an infinite rerender issue when using suspense with conditional fetching from version 1.0.0 onwards (including current beta).

The SWR documentation on Suspense says that with conditional fetching, data should be undefined but with version 1.0.0+, it seems to fallback to the Suspense component instead and causes an infinite render loop where the useSWR hook is called. I'm new to suspense, but I suppose this is not expected behaviour?

  1. Am I doing something wrong in the code?
  2. Is the behaviour expected? If it is, how are you supposed to deal with conditional data fetching? Is there any additional documentation on the subject somewhere?

Here is a Codesandbox where you can test the issue: https://codesandbox.io/s/cold-dust-4dvzl?file=/src/App.js (uncomment response to run it). Here's the code as well:

import React, { useState, Suspense } from "react";
import useSWR from "swr";
import "./styles.css";

const fetcher = (str) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(str);
    }, 1000);
  });
};

const Test = (props) => {
  console.log("renders");

  const response = useSWR(props.str ?? null, fetcher, { suspense: true });

  return (
    <>
      <div>Data:</div>
      <pre>{JSON.stringify(response, null, 2)}</pre>
    </>
  );
};

export default function App() {
  const [str, setStr] = useState();
  return (
    <div className="App">
      <h1>SWR test</h1>
      <Suspense fallback={<div>loading...</div>}>
        <Test str={str} />
      </Suspense>
      <button onClick={() => setStr("hello world")}>Clicky</button>
    </div>
  );
}

Thanks! 🙇

jstejada
jstejada

@shuding what version of React are you using? if you're on the 18 beta, can you check if using React.startTransition to schedule the update fixes this? e.g. React.startTransition(() => setStr("..."))

Nov
25
5 days ago
Activity icon
issue

jstejada issue comment facebook/react

jstejada
jstejada

[DevTools Bug]: They make Firefox's debugger unusable (can't continue or step over)

Website or app

https://jsfiddle.net/xyuri/ejp1of89/

Repro steps

It's really easier to reproduce by opening a simple page in Firefox (93 in my case):

<!doctype html>
<html>
<body>
<script>
    console.log(1);
    debugger
    console.log(1);
    debugger
    console.log(1);
</script>
</body>
</html>

Because in a sandbox, Firefox behaves even more... erratically?

The steps:

  1. Open the page. Open the Firefox's dev tools. Refresh. It stops on the first debugger statement.
  2. Press F8 (continue) or F10 (step over). And now there are signs that the debugging session ended (no current line, Continue button changes into Pause button), and that it goes on (Stop loading this page button doesn't change into Reload current page button, the loading page spinner is, well, spinning). All in all, the debugger doesn't respond to keys or button presses. To give you a glimpse of what it looks like:

Sometimes it helps to step into and out of the debugger statement (instead of F8/F10). After that it works. But not always.

When I disable the extension, it works without any tricks. Took me a while to figure out.

I tried disabling everything but React Dev Tools and restarting Firefox. No difference.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

jstejada
jstejada

thanks for the report @x-yuri, i am in fact able to repro the behavior you describe, although not consistently all the time, in some instances i am able to get the debugger to continue.

interestingly, it only seems to get stuck if we pause on a console.log statement; e.g. if i add the debugger at another place that isn't a console.log i am able to advance as normal.

when i step into the console.log or pause execution while it's stuck, it seems like Firefox is getting stuck in a loop trying to evaluate the following expression to check for the presence of DevTools and React, window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0; specifically, it's getting stuck trying to access the getter function for __REACT_DEVTOOLS_GLOBAL_HOOK__ on the window object.

I'll see if i can dig into this more, but based on this behavior it also seems like it could maybe be a Firefox bug? i'll look more into this with the team and report back cc @bvaughn

Activity icon
issue

jstejada issue comment facebook/react

jstejada
jstejada

Bug: Parent Component already rendered, But Child Component can not rerender in StrictMode

React version: 17.x or [email protected]

Steps To Reproduce

  1. Just click the button
  2. look the log infomations

Link to code example:

https://codesandbox.io/s/strictmode-v1emy?file=/src/App.js

The current behavior

Child Component not rerender

The expected behavior

Child Component need rerender

jstejada
jstejada

hey @janryWang thanks for creating the issue.

so if i'm understanding correctly, based on the behavior i'm seeing in the sandbox, you're saying that the first time we try to click the button to update the value the Button component isn't updating despite the parent being re-rendered, and that this only happens when we're using a StrictMode tree?

it's interesting that it only happens the first time I click, and subsequent updates do go through.

I wonder if it has something to do with the @formily/reactive-react libraries you are using? can you still reproduce this issue without using those libraries?

pull request

jstejada pull request facebook/react

jstejada
jstejada

Fix typo

Summary

How did you test this change?

Activity icon
issue

jstejada issue comment facebook/react

jstejada
jstejada

Fix typo

Summary

How did you test this change?

jstejada
jstejada

thanks for the contribution! however i don't thin this is a typo, i think the grammar here is correct

pull request

jstejada pull request facebook/react

jstejada
jstejada

DevTools: Log version in internal logger

Summary

Log the version in our internal logger.

How did you test this change?

  • yarn flow
  • yarn test-build-devtools
  • version is logged correctly

image

Activity icon
created branch

jstejada in jstejada/react create branch log-version

createdAt 5 days ago
Previous