@kentcdodds Ping 🙂 I think this is still relevant for ts codebases

@bvaughn Thanks, I understand now why there is a second rerender which I didn't expect.

But I don't think I see a solution yet.

The idea is to create a reusable hook which doesn't create a ref object, but accepts a ref.

I read that it's a better practice to create refs outside of reusable hooks. In that case, you can reuse hooks with different logic involving one dom element. Something like this:

function SomeComponent() {
  const ref = useRef();
  const { width } = useResizeObserver({ ref });
  const { focused } = useFocusWithin({ ref });
  const { hovered } = useHoverDisclosure({ ref });

  return (
    <div ref={ref}>{...}</div>
  );
}

You could argue that if you use ref callbacks then this can be solved with function composition, but this would create a much more cumbersome API for the consumer of these hooks.

What do you think? cc @vkurchatkin

It is defined when useLayoutEffect is executed, but during first render undefined is what you pass inside of dependencies array.

whoa...

Ok, I'll need some time for this to sink in... :)

@vkurchatkin

ref.current is undefined initially

Actually, it is defined, AFAU that's the point of useLayoutEffect: by the time it's run, the dom had already been commited. I added an if with an early return to my example to demonstrate that.

You are not supposed to use ref.current as a dependency

I thought that was what official react hooks linter recommended? If that's the wrong way, then what's the proper way to update effect if the dom node changes or gets destroyed?

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

React version: v16.3.1

Steps To Reproduce

1. add useLayoutEffect
2. add dom node to the deps array
3. invoke setState inside useLayoutEffect callback

<!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. -->

Link to code example: https://codepen.io/everdimension/pen/rNOpZGK

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

useLayoutEffect callback gets called a second time, although the values in the deps array have not changed

The expected behavior

useLayoutEffect callback should not get called unless values in the dependency array change

If I understand correctly, this exercise is supposed to be solved with "type predicates", but the url leads to the docs section about "typeof" type guards.

I guess was a type-o in /usr/local/bin path

Bumps acorn from 5.7.3 to 5.7.4. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/acornjs/acorn/commit/6370e90067552022710190319cbbbd8c43001957"><code>6370e90</code></a> Mark version 5.7.4</li> <li><a href="https://github.com/acornjs/acorn/commit/fbc15b1344f6dfb992f67b4bbf1357436247c8a0"><code>fbc15b1</code></a> More rigorously check surrogate pairs in regexp validator</li> <li>See full diff in <a href="https://github.com/acornjs/acorn/compare/5.7.3...5.7.4">compare view</a></li> </ul> </details> <br />

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.

<details> <summary>Dependabot commands and options</summary> <br />

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.

</details>

Bumps acorn from 5.7.3 to 5.7.4. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/acornjs/acorn/commit/6370e90067552022710190319cbbbd8c43001957"><code>6370e90</code></a> Mark version 5.7.4</li> <li><a href="https://github.com/acornjs/acorn/commit/fbc15b1344f6dfb992f67b4bbf1357436247c8a0"><code>fbc15b1</code></a> More rigorously check surrogate pairs in regexp validator</li> <li>See full diff in <a href="https://github.com/acornjs/acorn/compare/5.7.3...5.7.4">compare view</a></li> </ul> </details> <br />

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.

<details> <summary>Dependabot commands and options</summary> <br />

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.

</details>

Bumps acorn from 5.7.3 to 5.7.4. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/acornjs/acorn/commit/6370e90067552022710190319cbbbd8c43001957"><code>6370e90</code></a> Mark version 5.7.4</li> <li><a href="https://github.com/acornjs/acorn/commit/fbc15b1344f6dfb992f67b4bbf1357436247c8a0"><code>fbc15b1</code></a> More rigorously check surrogate pairs in regexp validator</li> <li>See full diff in <a href="https://github.com/acornjs/acorn/compare/5.7.3...5.7.4">compare view</a></li> </ul> </details> <br />

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.

<details> <summary>Dependabot commands and options</summary> <br />

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.

</details>

Thank you!

Prettier 2.0.2 Playground link

--parser babel

Input:

const Something = styled.div`
  background: var(--${one}); /* unexpected space after -- */
  border: 1px solid var(--${two}); /* unexpected space after -- */
`;

const What = div`
  background: var(--${one}); /* seems okay */
  border: 1px solid var(--${two}); /* seems okay */
`;

Output:

const Something = styled.div`
  background: var(-- ${one}); /* unexpected space after -- */
  border: 1px solid var(-- ${two}); /* unexpected space after -- */
`;

const What = div`
  background: var(--${one}); /* seems okay */
  border: 1px solid var(--${two}); /* seems okay */
`;

Expected behavior:

There should be no spaces after -- in the first output. Is there some hardcoded behavior for styled components?

Oh, I must've been looking at the v2 branch: https://github.com/ethereum/web3.js/blob/2ce573b65abd2f3c78d648b1d70f9a273e922e8c/README.md#community

Hi!

The docs link to this discord channel: https://discord.gg/NR42fy But the invite seems to be expired.

Is the discord channel still active? Can you please update the link?

Привет! Спасибо за интерес к библиотеке :)

Я бы очень хотел, чтобы задумку можно было осуществить через готовые реактовые порталы. Пока что насколько я вижу, к сожалению, с ними сделать задуманное не получается.

Твой пример не будет работать по следующим причинам

1. Самый простой кейс —

   function App() {
     return (
       <>
         <Area name="1"></Area>
         <Content name="1">hello</Content>
       </>
     );
   }
   

   Мы просто ничего не увидим на экране. Дело в том, что Area и Content рендерятся одновременно. На момент первого рендера Area ещё не успевает замаунтить дом-ноду, а Content уже её ищет. Поэтому пока по внешним причинам не произойдёт ререндер, страничка будет пустая. В идеале же концепция паттерна такая, что нам должно быть вообще всё равно, в каком порядке рендерить Area и Content. То есть если мы рендерим <Content name="1" />, но на странице на данный момент нет соответвующей Area, то ничего не должно ломаться, мы просто должны не видеть Content. Но как только <Area name="1" /> отрендерится, мы должны увидеть содержание Content, несмотря на то, что в этот момент ререндер родителя Content мог быть не вызван.

2. Допустим, первую проблему мы решили через какую-либо систему подписок и уведомлений. Вторая проблема — рендеринг нескольких Content в одну Area, при этом Content рендерится по кондишну:

   function App() {
     const [shouldShow, toggle] = setState(true);
     return (
       <>
         <button onClick={() => toggle(!shouldShow)}>toggle</button>
         <Area name="1"></Area>
         {shouldShow ? <Content name="1">hello</Content> : null}
         <Content name="1">world</Content>
       </>
     );
   }
   

   В этом случае, к сожалению, не будет соблюдаться порядок отображения. Сначала мы увидим "helloworld", затем "world", затем "worldhello". Если есть идеи, как решить эту проблему через порталы, мне будет очень интересно их послушать.

3. Лишний dom-элемент. При использовании порталов элемент <Area /> вынужден рендерить конкретный dom-элемент. Скорее всего это будет div. Но можно и параметризировать. В любом случае это не то, что мы хотим. По задумке <Area /> не должна создавать лишний dom-элемент вообще.

Hi! I have a question about the requirement for the snapshot to be immutable. I.e. you say that this is okay:

getSnapshot: source => Array.from(source.friendIDs)

But what about this?

getSnapshot: source => Array.from(source.friends)

where source.friends is an array of objects. The RFC implies that it's not okay. If so, then I believe it's worth emphasizing. But even then, I don't really get why it's necessary for the snapshot to be immutable. Isn't this what the version getter is for? So that parts of the source may be mutated, but react is informed about the fact that some mutation happened.

Another thing. I haven't been using redux a lot lately, but from what I see the idea of the getSnapshot function seems to be identical to "selectors" commonly used in redux apps. Could it be a good idea to reuse an existing and understood term if it does the same thing?