<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Fadoua Rasmouki</title>
    <description>The latest articles on DEV Community by Fadoua Rasmouki (@frtechy).</description>
    <link>https://dev.to/frtechy</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F565303%2F6547b13a-fe29-4ac6-8aea-c4f180d0feb7.jpg</url>
      <title>DEV Community: Fadoua Rasmouki</title>
      <link>https://dev.to/frtechy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/frtechy"/>
    <language>en</language>
    <item>
      <title>The Ghibli and ChatGPT Fiasco: AI, Ethics, and Copyrights</title>
      <dc:creator>Fadoua Rasmouki</dc:creator>
      <pubDate>Sun, 30 Mar 2025 09:37:25 +0000</pubDate>
      <link>https://dev.to/frtechy/the-ghibli-and-chatgpt-fiasco-ai-ethics-and-copyrights-136f</link>
      <guid>https://dev.to/frtechy/the-ghibli-and-chatgpt-fiasco-ai-ethics-and-copyrights-136f</guid>
      <description>&lt;p&gt;&lt;em&gt;Ah, but isn’t it all rather fascinating? Here we are, at the dawn of a new age, where Artificial Intelligence, sleek, efficient, and brimming with algorithmic precision, holds both promise and peril in its hands. It is, after all, a thing of contradictions: as sophisticated as a perfectly crafted soufflé, yet capable of mimicking our most human frailties. Rather than debating whether AI is inherently ethical, might it be more insightful to ask: What are we, in our curious ways, doing with this tool, one we have so carefully crafted to reflect ourselves? In our quest to build a machine that can think, paint, and write as we do, we find ourselves at a crossroads — one where we may discover that in the act of creating, we have perhaps outwitted ourselves.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The case of Studio Ghibli’s artwork, gently stolen by AI and broadcast to the world, is an example of this new era. But first, the fundamentals: &lt;br&gt;
&lt;strong&gt;Is AI inherently ethical?&lt;/strong&gt; Ah, the eternal question, except now, with a more pressing urgency. The answer, however, is simple in its complexity. &lt;br&gt;
No, AI is not inherently ethical. It is a tool. A tool devoid of intention, devoid of malice, devoid of any true understanding of the context within which it operates. &lt;br&gt;
Its morality, its capacity for right or wrong, is as null as the vast void that precedes creation itself. &lt;br&gt;
Ethics, the choice between good and bad, right and wrong, will, of course, be ours to make. &lt;br&gt;
That, I humbly think, is where we stand. On the precipice. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Human Touch, The Human Mistake&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You see, this is the rub. AI, in its cold precision, mimics our creativity, our brilliance, our art. But, like an echo in the mountains, it does so imperfectly. It is the wrong kind of mirror. Data, the lifeblood of this machine, is often born from our own biases, our own prejudices, and the failings we have yet to recognize. Take for instance, hiring algorithms which learn from historical data. If that data is inherently sexist or racist, what do we get in return? A magnification of our past mistakes. The machine may be indifferent, but it is not immune to human error. And therein lies the tension: the machine does not know it is wrong; it merely perpetuates our mistakes, repackaged with a sheen of objectivity.&lt;/p&gt;

&lt;p&gt;One can’t help but recall that old literary adage: “To err is human, to forgive divine.” Yet, AI can do neither, it cannot err in the human sense because it is too busy making decisions, and it cannot forgive, because it does not know how. The real challenge, then, is not only preventing AI from amplifying our worst instincts but in ensuring it doesn't wipe out the complexity of human error entirely. We need the balance; between machine and humanity, between objectivity and empathy, between the past and the future.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Ghibli Case: A Tale of Theft, or Merely Imitation?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;And then there’s Studio Ghibli. Ah, Ghibli, the warm, inviting embrace of the hand-drawn world. Hayao Miyazaki’s artistry is iconic, not merely for its visual style but for the deep humanity it captures. The world he created is one of ethereal beauty and emotional weight, a kind of place where nature, spirit, and soul entwine in a delicate ballet of narrative and imagery. &lt;/p&gt;

&lt;p&gt;But then the scandal. AI, in its infinite hunger, was fed Ghibli’s art and was instructed to mimic. It is the modern theft, a theft that may not even recognize itself as such. In 2023, ChatGPT and other AI art generators began to produce images that looked eerily like those drawn by the studio — no compensation, no permission, no acknowledgement. Just a perfect imitation. The artists were not at fault; the AI was. But the problem was not merely with the machine. The fault lies with the system that allowed it, our system, we allowed it. It raises a singular, pointed question: When AI produces something in the likeness of Ghibli’s work, who owns that output? Should Miyazaki, even in absentia, retain the right to say, “No, this is mine, and it cannot be used without my permission”? Or should we simply applaud the AI for its creativity and move on?&lt;/p&gt;

&lt;p&gt;Here’s the dilemma: Ghibli’s films are more than mere animation. They are cultural artifacts, each frame a testament to years of labor, artistry, and vision. When an AI can replicate that, is it creating art, or just stealing it, unknowing and uncaring, like a mindless copyist? &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Ghost in the Machine&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In many ways, this is not just a question of law, though law must certainly come into it. It’s a question of soul. How far are we willing to let technology go in replicating or even replacing the human touch? Should we, as creators and consumers, cede more control to machines, or should we draw a line in the sand?&lt;/p&gt;

&lt;p&gt;The case of Ghibli highlights the broader issue, a cultural concern about the ethics of AI in creative industries. If we are to continue this march into the future, then it becomes clear that new frameworks for intellectual property must be created; frameworks that account for the possibility of AI "generating" art and whether that art truly belongs to the AI creators or to the humans whose data fed it. Can an AI have a claim to a “style,” or is the style forever and exclusively tied to the human mind that created it?&lt;/p&gt;

&lt;p&gt;But perhaps the answer is a bit more prosaic than we might imagine. After all, human creativity is an inherently messy affair, full of failure, unpredictability, and contradictions. And if AI is allowed to become too neat, too precise in its creations, we might find that it is not art that is truly produced, but something far colder. Perhaps, as in all things, there must be room for error, for the human touch that no algorithm can yet replicate, and certainly not replace.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Future: A Collaboration?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So, as we stand on the edge of this brave new world where AI can replicate the Ghibli style or write entire novels perhaps even compose symphonies, we must ask ourselves: What do we value? Do we value the authenticity of human creation, with all its flaws, mistakes, and beauty? Or are we content with letting the machine take over?&lt;/p&gt;

&lt;p&gt;The Ghibli incident is a snapshot, a microcosm of the larger conversation about AI and copyright. And, perhaps, it’s also a call to action to protect what is ours, to understand what is truly valuable in art. The AI is a tool, not the artist after all. It is, at its core, an imitation. The question we must ask ourselves is: Do we want to be imitated? Or do we want to preserve our own place in this rapidly changing world?&lt;/p&gt;

&lt;p&gt;The story of Ghibli and AI isn’t just about copyright, it’s about preserving what is human in the face of the post-human.&lt;/p&gt;

</description>
      <category>chatgpt</category>
      <category>aiethics</category>
      <category>ai</category>
      <category>ghibli</category>
    </item>
    <item>
      <title>Essential Hooks for Every Developer</title>
      <dc:creator>Fadoua Rasmouki</dc:creator>
      <pubDate>Tue, 02 Jul 2024 12:02:19 +0000</pubDate>
      <link>https://dev.to/frtechy/essential-hooks-for-every-developer-16do</link>
      <guid>https://dev.to/frtechy/essential-hooks-for-every-developer-16do</guid>
      <description>&lt;h3&gt;
  
  
  Introduction - What is a React Hook?
&lt;/h3&gt;

&lt;p&gt;A React Hook is a special function that lets you "hook into" React features like state and lifecycle methods, enabling functional components to manage state and side effects.&lt;/p&gt;

&lt;p&gt;Now, you've decided to build a React app, leveraging the power of React hooks. With numerous hooks available, it can be challenging to know which ones to use. &lt;/p&gt;

&lt;p&gt;Let's explore the essential hooks, understand their functions, and see some concise examples to get you started:&lt;/p&gt;

&lt;h3&gt;
  
  
  State Management Hooks
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;useState&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;useState&lt;/code&gt; hook is fundamental for managing state and rendering components upon state changes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Increment&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;code&gt;useReducer&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;useReducer&lt;/code&gt; hook is ideal for handling more complex state logic.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useReducer&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;reducer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;increment&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;decrement&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useReducer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reducer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;increment&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Increment&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;decrement&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Decrement&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Effect Hooks
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;useEffect&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;Effect hooks allow you to perform side effects, such as data fetching or DOM manipulation.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useEffect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Example&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`Count: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Increment&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;code&gt;useLayoutEffect&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;useLayoutEffect&lt;/code&gt; runs synchronously after all DOM mutations, useful for operations that need to occur before the browser repaints.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useLayoutEffect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useRef&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;LayoutEffectExample&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useRef&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nf"&gt;useLayoutEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getBoundingClientRect&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Measure my dimensions&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Ref Hooks
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;useRef&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;useRef&lt;/code&gt; hook allows you to persist values across renders without causing a re-render.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useRef&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;TextInputWithFocusButton&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;inputEl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useRef&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;onButtonClick&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;inputEl&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;focus&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt; &lt;span class="na"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;inputEl&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;onButtonClick&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Focus the input&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;code&gt;useImperativeHandle&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;useImperativeHandle&lt;/code&gt; customizes the instance value that is exposed when using &lt;code&gt;ref&lt;/code&gt; in parent components.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useImperativeHandle&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useRef&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;forwardRef&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;FancyInput&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;forwardRef&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;inputRef&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useRef&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nf"&gt;useImperativeHandle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;focus&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;inputRef&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;focus&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}));&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt; &lt;span class="na"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;inputRef&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Parent&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;inputRef&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useRef&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;FancyInput&lt;/span&gt; &lt;span class="na"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;inputRef&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;inputRef&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;focus&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Focus the input&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Performance Hooks
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;useMemo&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;useMemo&lt;/code&gt; memoizes expensive calculations, recomputing the cached value only when its dependencies change.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useMemo&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ExpensiveCalculationComponent&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useMemo&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Result: &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;code&gt;useCallback&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;useCallback&lt;/code&gt; memoizes callback functions, preventing unnecessary re-creations on each render.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useCallback&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleClick&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useCallback&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleClick&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Context Hooks
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;useContext&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;useContext&lt;/code&gt; accesses values from a context provider.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useContext&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MyContext&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createContext&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Display&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;MyContext&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;MyContext&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Provider&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Hello, World!"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Display&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;MyContext&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Provider&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Transition Hooks
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;useTransition&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;useTransition&lt;/code&gt; marks state updates as non-urgent, improving user experience by deferring heavy computations.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useTransition&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;FilterList&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setFilter&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;startTransition&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useTransition&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;filteredItems&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt;
        &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt;
        &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="na"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="nf"&gt;startTransition&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setFilter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Loading...&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;filteredItems&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;code&gt;useDeferredValue&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;useDeferredValue&lt;/code&gt; defers a value update to maintain responsiveness.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useDeferredValue&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;DeferredList&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setFilter&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;deferredFilter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useDeferredValue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;filteredItems&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;deferredFilter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setFilter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;filteredItems&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;React hooks provide a powerful and flexible way to manage state, handle side effects, and optimize performance in your React applications. By understanding and utilizing these essential hooks, you can build more efficient and maintainable React apps. For a deeper dive into all things React, consider exploring comprehensive resources and bootcamps that offer interactive challenges, videos, and cheat sheets.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>javascript</category>
    </item>
    <item>
      <title>The Influence of Nature on Design: From Evolutionary Lessons to Practical Applications</title>
      <dc:creator>Fadoua Rasmouki</dc:creator>
      <pubDate>Fri, 28 Jun 2024 06:01:49 +0000</pubDate>
      <link>https://dev.to/frtechy/the-influence-of-nature-on-design-from-evolutionary-lessons-to-practical-applications-4141</link>
      <guid>https://dev.to/frtechy/the-influence-of-nature-on-design-from-evolutionary-lessons-to-practical-applications-4141</guid>
      <description>&lt;h3&gt;
  
  
  Introduction
&lt;/h3&gt;

&lt;p&gt;Nature, with its intricate designs and evolutionary marvels, has been a timeless source of inspiration for creators across various fields. From the undulating fins of a humpback whale to the microscopic scales on shark skin, the principles derived from nature have not only sparked creativity but have also provided practical solutions to complex problems. This short article I explore how observing and learning from nature can enhance design processes, offering insights into both historical evolution and contemporary applications.&lt;/p&gt;

&lt;h3&gt;
  
  
  Drawing Inspiration from Nature's Masterpieces
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Humpback Whale:&lt;/strong&gt;&lt;br&gt;
The humpback whale, with its unique pectoral fins, has inspired innovations in engineering. The bumpy protrusions, known as tubercles, on the leading edges of the fins reduce drag and increase lift. This natural design has been adapted into the development of more efficient propellers and wind turbines, showcasing how nature’s evolutionary solutions can be applied to modern technology.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Shark Skin:&lt;/strong&gt;&lt;br&gt;
Shark skin is covered in tiny, tooth-like scales called dermal denticles, which reduce drag and prevent bacterial colonization. This biological marvel has influenced the design of hospital equipment and swimwear, demonstrating how micro-scale features can lead to macro-scale benefits.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Moths:&lt;/strong&gt;&lt;br&gt;
Moths are fascinating creatures whose unique characteristics have inspired various design innovations. The structure of moth eyes, for instance, minimizes reflection and maximizes light absorption. This feature has been adapted into anti-reflective coatings for screens and solar panels, enhancing efficiency and usability. Additionally, the scales on moth wings, which can absorb certain frequencies of sound, are being studied for applications in soundproofing materials. These examples highlight how even the smallest details in nature can lead to significant technological advancements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Human Evolution and Its Impact on Design
&lt;/h3&gt;

&lt;p&gt;Understanding human evolution provides context for how we perceive and replicate natural designs. Humans evolved from single-cell organisms, traversing through stages such as amphibians, reptiles, and mammals. One notable evolutionary ancestor is Dimetrodon, a synapsid often mistaken for a dinosaur but actually a distant relative of mammals. This evolutionary lineage highlights the adaptability and innovation inherent in natural designs.&lt;/p&gt;

&lt;h3&gt;
  
  
  Mythology and Storytelling: Nature's Role in Human Creativity
&lt;/h3&gt;

&lt;p&gt;Early human art and mythology were deeply rooted in nature. Cave paintings often depicted animals and animal-human hybrids, serving as early forms of communication and survival guides. Ancient myths, like that of the Cyclops inspired by prehistoric elephant skulls, provided explanations for natural phenomena and human morality, illustrating how nature has always been intertwined with human creativity.&lt;/p&gt;

&lt;h3&gt;
  
  
  Creature Design Principles: Learning from Nature
&lt;/h3&gt;

&lt;p&gt;To create unique and believable designs, it’s essential to draw inspiration from nature rather than relying on existing designs. Consider the environment, diet, reproduction, and survival mechanisms of the creature. For instance, the Xenomorph in the Alien franchise was influenced by various natural creatures, resulting in a design that feels both alien and realistic.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Design Process: From Inspiration to Creation
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Initial Inspiration:&lt;/strong&gt;&lt;br&gt;
Begin by observing nature and gathering references. Whether it’s the vibrant colors of a tropical bird or the streamlined body of a fish, nature offers a vast array of inspirational sources.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Iterative Sketching:&lt;/strong&gt;&lt;br&gt;
Start with simple sketches, focusing on primary shapes. Gradually add secondary and tertiary forms, refining the design with each iteration. Ensure that the foundational shapes are strong before moving on to intricate details.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Functionality and Form:&lt;/strong&gt;&lt;br&gt;
Every feature in nature serves a purpose. Apply this principle to design by ensuring that each element of your creation contributes to its overall functionality and coherence. &lt;/p&gt;

&lt;h3&gt;
  
  
  Practical Applications in Modern Design
&lt;/h3&gt;

&lt;p&gt;Nature-inspired designs have led to numerous innovations. For example, the Japanese bullet train’s nose design was inspired by the kingfisher’s beak, reducing noise and improving aerodynamics. Similarly, carpet tiles mimicking forest floors enhance both aesthetics and functionality in interior design.&lt;/p&gt;

&lt;p&gt;In UI/UX design, bright buttons attract users' attention similar to how vibrant fruits attract animals. Understanding the underlying principles of natural attraction can enhance the effectiveness of design elements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion: Embracing Nature's Wisdom
&lt;/h3&gt;

&lt;p&gt;By observing and learning from nature, designers can tap into a repository of evolutionary wisdom and ingenuity. Spend time in nature or explore documentaries to gather inspiration. Analyze why certain features exist and how they aid survival. Use examples of ecological niches and convergent evolution to inform design choices, ensuring that every feature serves a functional purpose and contributes to a coherent, unique creation.&lt;/p&gt;

&lt;p&gt;Nature’s adaptability and innovation offer a timeless guide for design. By embracing these principles, designers can create solutions that are not only aesthetically pleasing but also functionally superior.&lt;/p&gt;

</description>
      <category>uxdesign</category>
      <category>ui</category>
      <category>emotionaldesign</category>
      <category>figma</category>
    </item>
    <item>
      <title>Empowering Diversity: Imposter Syndrome and Economic Inclusion in Tech Worldwide</title>
      <dc:creator>Fadoua Rasmouki</dc:creator>
      <pubDate>Thu, 27 Jun 2024 01:30:32 +0000</pubDate>
      <link>https://dev.to/frtechy/empowering-diversity-imposter-syndrome-and-economic-inclusion-in-tech-worldwide-59pe</link>
      <guid>https://dev.to/frtechy/empowering-diversity-imposter-syndrome-and-economic-inclusion-in-tech-worldwide-59pe</guid>
      <description>&lt;p&gt;&lt;strong&gt;Definitions&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Imposter Syndrome&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Imposter syndrome, also known as impostor phenomenon or impostorism, is a psychological occurrence in which an individual doubts their skills, talents, or accomplishments and has a persistent internalized fear of being exposed as a fraud. This phenomenon is characterized by an internal experience of believing that you are not as competent as others perceive you to be, creating a constant sense of inadequacy and fear of being discovered as a "fraud."&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Economic Inclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Economic inclusion implies giving all members of society, including non-citizens and vulnerable and underserved groups, access to labor markets, finance, entrepreneurial expertise, and economic opportunities. This involves empowering women and marginalized groups to increase their financial autonomy, bargaining power, and self-esteem while reducing their exposure to risks. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tech&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Technology, often referred to simply as "tech," covers the group of businesses working in the research, development, and distribution of technology-based goods or services. Despite significant progress in technology and its widespread influence on various aspects of life, there remain notable disparities in economic inclusion within the tech sector.&lt;/p&gt;

&lt;p&gt;Recent figures suggest a drop in the number of female CEOs, despite the success of campaigns such as International Women’s Day (March 8) at improving equality and diversity in the workplace. For many women, feeling like an imposter is linked to identity threat, which is more prevalent in contexts inhospitable to women, such as technical fields. Gender stereotypes suggest that women don't fit or don't have the same capabilities as men, leading to feelings of exclusion and stigma.&lt;/p&gt;




&lt;h3&gt;
  
  
  Imposter Syndrome: A Barrier to Success
&lt;/h3&gt;

&lt;p&gt;Imposter syndrome affects individuals across various fields, but its impact is particularly profound in the tech industry. The tech sector is traditionally male-dominated, and women often find themselves as minorities in their workplaces. This imbalance can intensify feelings of imposter syndrome, as women may struggle to see role models who reflect their own experiences and aspirations.&lt;/p&gt;

&lt;p&gt;The psychological toll of imposter syndrome is significant. It can lead to chronic stress, burnout, and a reluctance to pursue opportunities for growth and advancement. For instance, a woman in tech might hesitate to apply for a promotion or take on a challenging project because she doubts her own abilities, even if she is highly qualified. This self-doubt can create a vicious cycle, where the lack of representation and mentorship perpetuates feelings of inadequacy.&lt;/p&gt;

&lt;p&gt;Moreover, imposter syndrome can undermine one's ability to network effectively. In an industry where connections and collaborations are crucial, feeling like a fraud can make it difficult for individuals to assert themselves, share their ideas, and build professional relationships. This further isolates them from opportunities and resources that could help them succeed.&lt;/p&gt;




&lt;h3&gt;
  
  
  Economic Inclusion: Bridging the Gap
&lt;/h3&gt;

&lt;p&gt;Economic inclusion in the tech industry is not only a matter of social justice but also a driver of innovation and growth. Diverse teams bring varied perspectives and problem-solving approaches, which can lead to more creative solutions and better business outcomes. However, achieving economic inclusion requires addressing systemic barriers that prevent marginalized groups from fully participating in the tech workforce.&lt;/p&gt;

&lt;p&gt;One major barrier is access to education and training. Many underserved communities lack the resources and opportunities to pursue education in STEM (science, technology, engineering, and mathematics) fields. Initiatives that provide scholarships, mentorship programs, and accessible training can help bridge this gap. For example, organizations like Girls Who Code and Black Girls CODE are working to empower young women of color with the skills and confidence to pursue careers in tech.&lt;/p&gt;

&lt;p&gt;In addition to education, economic inclusion involves creating inclusive workplace cultures. This means not only hiring diverse talent but also fostering environments where all employees feel valued and supported. Companies can implement policies such as flexible work arrangements, robust parental leave, and diversity training to create more equitable workplaces. Leadership commitment to diversity and inclusion is crucial, as it sets the tone for the entire organization.&lt;/p&gt;




&lt;h3&gt;
  
  
  Tech: A Sector in Transformation
&lt;/h3&gt;

&lt;p&gt;The tech industry is undergoing rapid transformation, driven by advancements in artificial intelligence, machine learning, and digital technologies. This evolution presents both challenges and opportunities for economic inclusion. On one hand, new technologies can exacerbate existing inequalities if they are developed and deployed without consideration for diverse perspectives. For instance, biased algorithms can perpetuate discrimination in hiring, lending, and other areas.&lt;/p&gt;

&lt;p&gt;On the other hand, technology can be a powerful tool for promoting inclusion. Digital platforms can democratize access to information, education, and economic opportunities. For example, online learning platforms like Coursera and edX provide access to high-quality education from top universities, allowing individuals from all backgrounds to acquire new skills and credentials. Similarly, remote work opportunities enabled by digital tools can make it easier for people with disabilities or caregiving responsibilities to participate in the workforce.&lt;/p&gt;

&lt;p&gt;To harness the potential of technology for economic inclusion, it is essential to prioritize ethical considerations in tech development. This involves ensuring that diverse voices are included in the design and implementation of new technologies and that the impacts of these technologies on different communities are carefully assessed. Companies and policymakers must work together to create frameworks that promote fairness, transparency, and accountability in tech.&lt;/p&gt;




&lt;h3&gt;
  
  
  Addressing Identity Threat and Stereotypes
&lt;/h3&gt;

&lt;p&gt;Feeling like an imposter is often linked to identity threat, particularly in environments where individuals feel that they do not belong. In the tech industry, where gender and racial stereotypes persist, women and people of color may experience heightened identity threat. This can manifest in various ways, from subtle microaggressions to overt discrimination.&lt;/p&gt;

&lt;p&gt;Addressing identity threat requires a multifaceted approach. One strategy is to increase the visibility of diverse role models in tech. When individuals see people who look like them succeeding in their field, it can help counteract feelings of exclusion and inspire confidence. Companies can highlight the achievements of women and minorities through internal communications, public relations, and community engagement efforts.&lt;/p&gt;

&lt;p&gt;Mentorship and sponsorship programs are also vital. Mentors can provide guidance, support, and encouragement, helping individuals navigate challenges and develop their careers. Sponsors, on the other hand, use their influence to advocate for the advancement of their protégés. These relationships can help break down barriers and create pathways to leadership for underrepresented groups.&lt;/p&gt;




&lt;h3&gt;
  
  
  Practical Steps for Overcoming Imposter Syndrome
&lt;/h3&gt;

&lt;p&gt;For individuals struggling with imposter syndrome, there are several strategies that can help mitigate its effects. One effective approach is to focus on evidence-based achievements. Keeping a record of accomplishments, positive feedback, and successful projects can provide tangible proof of one’s abilities and counteract negative self-perceptions.&lt;/p&gt;

&lt;p&gt;Another strategy is to reframe failure as a learning opportunity. Everyone makes mistakes, and viewing them as chances for growth rather than as evidence of inadequacy can help build resilience. Seeking out constructive feedback and using it to improve can also foster a growth mindset.&lt;/p&gt;

&lt;p&gt;Building a support network is crucial. Connecting with peers who share similar experiences can provide a sense of solidarity and reduce feelings of isolation. Professional organizations, networking groups, and online communities can offer valuable support and resources.&lt;/p&gt;

&lt;p&gt;Finally, it’s important to seek professional help if imposter syndrome is significantly impacting mental health and well-being. Therapists and counselors can provide tools and techniques for managing anxiety, building self-esteem, and developing healthier thought patterns.&lt;/p&gt;




&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Imposter syndrome and economic inclusion are deeply intertwined issues that significantly impact the tech industry. Addressing these challenges requires a comprehensive approach that includes education, workplace culture, ethical tech development, and individual support. By fostering an inclusive environment and providing opportunities for all, the tech industry can not only improve diversity but also drive innovation and growth. As we move forward, it is essential to continue these efforts and ensure that everyone has the opportunity to succeed and thrive in the tech world.&lt;/p&gt;

</description>
      <category>womenintech</category>
      <category>inclusion</category>
      <category>a11y</category>
    </item>
    <item>
      <title>Ilya Sutskever's Vision: Safe Superintelligent AI</title>
      <dc:creator>Fadoua Rasmouki</dc:creator>
      <pubDate>Wed, 26 Jun 2024 01:22:34 +0000</pubDate>
      <link>https://dev.to/frtechy/ilya-sutskevers-vision-safe-superintelligent-ai-17n2</link>
      <guid>https://dev.to/frtechy/ilya-sutskevers-vision-safe-superintelligent-ai-17n2</guid>
      <description>&lt;p&gt;In a recent discussion, Ilya Sutskever, the prominent deep learning computer scientist and co-founder of OpenAI, shared insights into his long-held conviction about the potential of large neural networks, the path to Artificial General Intelligence (AGI), and the crucial issues surrounding AI safety. &lt;/p&gt;

&lt;h3&gt;
  
  
  The Conviction Behind Deep Learning
&lt;/h3&gt;

&lt;p&gt;Sutskever began by explaining his early belief in the power of large neural networks. He outlined two key beliefs essential to this conviction. The first is straightforward: the human brain is significantly larger than those of other animals, such as cats or insects, and correspondingly more capable. The second, more complex belief is that artificial neurons, despite their simplicity, are not fundamentally different from biological neurons in terms of essential information processing. He posited that if we accept artificial neurons as sufficiently similar to biological ones, we have an existence proof in the human brain that large neural networks can achieve extraordinary feats. This reasoning was feasible in his academic environment, particularly with influences like his graduate school mentor, Jeff Hinton.&lt;/p&gt;

&lt;h3&gt;
  
  
  Defining and Achieving AGI
&lt;/h3&gt;

&lt;p&gt;When asked about his definition of AGI, Sutskever referred to the OpenAI Charter, which defines AGI as a computer system capable of automating the vast majority of intellectual labor. He elaborated that an AGI would essentially be as smart as a human, functioning as a competent coworker. The term "general" in AGI implies not just versatility but also competence in performing tasks effectively. &lt;/p&gt;

&lt;p&gt;On whether we currently possess the necessary components to achieve AGI, he emphasized that while the question often focuses on specific algorithms like Transformers, it is better to think in terms of a spectrum. Although improvements in architecture are possible and likely, even the current models, when scaled, show significant potential.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Role of Scaling Laws
&lt;/h3&gt;

&lt;p&gt;Sutskever discussed scaling laws, which relate input size to simple performance metrics like next-word prediction accuracy. While these relationships are strong, they do not directly predict the more complex and useful emergent properties of neural networks. He highlighted an example from OpenAI's research where they accurately predicted coding problem-solving capabilities, marking an advancement over simpler metrics.&lt;/p&gt;

&lt;h3&gt;
  
  
  Surprises in AI Capabilities
&lt;/h3&gt;

&lt;p&gt;Reflecting on surprising emergent properties of scaled models, Sutskever noted that while neural networks' ability to perform tasks like coding was astonishing, the mere fact that neural networks work at all was a profound surprise. Initially, neural networks showed limited functionality, but their rapid advancements, especially in areas like code generation, have been remarkable.&lt;/p&gt;

&lt;h3&gt;
  
  
  AI Safety Concerns
&lt;/h3&gt;

&lt;p&gt;The conversation shifted to AI safety, where Sutskever outlined his concerns about the future power of AI. He emphasized that current AI capabilities, while impressive, are not where his primary concerns lie. Instead, the potential future power of AI poses significant safety challenges. He identified three main concerns:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scientific Problem of Alignment&lt;/strong&gt;: Drawing an analogy to nuclear safety, he highlighted the need to ensure AI systems are designed to avoid catastrophic failures. This involves creating standards and regulations to manage the immense power of future AI systems, akin to the proposed international standards for superintelligence mentioned in a recent OpenAI document.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Human Interests and Control&lt;/strong&gt;: The second challenge involves ensuring that powerful AI systems, if controlled by humans, are used ethically and beneficially. He expressed hope that superintelligent AI could help solve the problems it creates, given its superior understanding and capabilities.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Natural Selection and Change&lt;/strong&gt;: Even if alignment and ethical control are achieved, the constant nature of change poses a challenge. Sutskever suggested that solutions like integrating AI with human cognition, as proposed by initiatives like Neuralink, could be one way to address this issue.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  The Potential of Superintelligence
&lt;/h3&gt;

&lt;p&gt;Sutskever concluded by discussing the immense potential benefits of overcoming these challenges. Superintelligence could lead to unprecedented improvements in quality of life, including material abundance, health, and longevity. Despite the significant risks, the rewards of navigating these challenges successfully could result in a future that is currently beyond our wildest dreams.&lt;/p&gt;

&lt;p&gt;The conversation highlighted the nuanced understanding and forward-thinking approach required to harness the full potential of AI while addressing its inherent risks. Sutskever's insights underscore the importance of continued research, ethical considerations, and proactive measures in the development of AI technologies.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>machinelearning</category>
      <category>interview</category>
      <category>chatgpt</category>
    </item>
  </channel>
</rss>
