DEV Community

Agata
Agata

Posted on

1

React.useRefの理解を含めるエクササイズ

document.getElementById vs useRef vs useState

違いはわかりますか…?
いつ使えばいいか迷ったら、ぜひ下記のエクササイズをやってみてください!

エクササイズはこちらです:

https://codesandbox.io/s/react-useref-t7pmkn?file=/read.me

プロジェクトでは4つエクササイズがあります:

  • エクササイズ1:src/components/Zero.tsx (document.getElementById vs useState)
  • エクササイズ2:src/components/First.tsx (document.getElementById vs useRef)
  • エクササイズ3:src/components/Second.tsx (useRef vs useState:useRefを使いすぎた場合)
  • エクササイズ4:src/components/Third.tsx (useRef vs useState:不要なレンダリング防ぎ方)

read.meを参考にしてください。

回答はこちらになります:

https://codesandbox.io/s/react-hooks-good-answers-6mhjcz?file=/read.me

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay