Merge remote-tracking branch 'upstream/master' into translate-forwarding-refs

ngTurk · ngTurk · commit 46618a5fd994 · 2020-08-14T14:01:28.000-04:00
diff --git a/TRANSLATION.md b/TRANSLATION.md
@@ -75,7 +75,7 @@ ReactDOM.işle(bileşen, document.idKullanarakElemanıGetir('kök'));
 
 ## Dış Bağlantılar
 
-Sayfada yer alan [MDN] veya [Wikipedia] gibi harici bağlantılar diğer bir makaleye yönelikse ve bu makalenin Türkçe dilinde kabul edilebilir kalitede bir sürümü varsa, bağlantıyı bu sürümünkiyle değiştirmeyi düşününüz. Ayrıca Wikipedia Türkiye'de uzun süredir yasaklı olduğu için, Wikipedia linklerini [MDN] veya [EksiSozluk] gibi tanınmış sitelerdeki versiyonları ile değiştirebilirsiniz.
+Sayfada yer alan [MDN] veya [Wikipedia] gibi harici bağlantılar diğer bir makaleye yönelikse ve bu makalenin Türkçe dilinde kabul edilebilir kalitede bir sürümü varsa, bağlantıyı bu sürümünkiyle değiştirmeyi düşününüz. 
 
 [MDN]: https://developer.mozilla.org/en-US/
 [Wikipedia]: https://en.wikipedia.org/wiki/Main_Page
diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md
@@ -23,8 +23,8 @@ It also offers full support for React Hooks, including inspecting nested objects
 * `16.x`: Supported
 
 **`react-native`**
-* `0`-`0.61`: Not supported
-* `0.62`: Will be supported (when 0.62 is released)
+* `0`-`0.61.x`: Not supported
+* `0.62`: Supported
 
 ## How do I get the new DevTools? {#how-do-i-get-the-new-devtools}
 
diff --git a/content/community/examples.md b/content/community/examples.md
@@ -10,7 +10,7 @@ React topluluğu tarafından yaratılmış pek çok proje mevcut. Bu sayfada, ü
 
 Siz de kendi projenizi eklemekten çekinmeyin. Eğer bir proje eklerseniz, lütfen projenizin React'in en güncel sürümleriyle uyumlu olmasını sağladığınızdan emin olun.
 
-## Small Examples
+## Small Examples {#small-examples}
 
 * **[Zeldog](https://yannsainty.github.io/Zeldog/)** Bir köpeğin daha fazla pizza yemek için ördeklerle savaştığı, Zelda benzeri bir oyun.
 * **[Hesap Makinesi](https://github.com/ahfarmer/calculator)** iOS hesap makinesinin  React ile uygulanmış hali
@@ -33,7 +33,6 @@ Siz de kendi projenizi eklemekten çekinmeyin. Eğer bir proje eklerseniz, lütf
 * **[Counter App](https://github.com/arnab-datta/counter-app)** A small shopping cart example
 * **[Tutorial Solutions](https://github.com/harman052/react-tutorial-solutions)** Solutions to challenges mentioned at the end of React tutorial
 
-## Complete Apps
+## Complete Apps {#complete-apps}
 
-* **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL
 * **[Builder Book](https://github.com/builderbook/builderbook)** Open-source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
@@ -40,8 +40,8 @@ console.log(add(16, 26)); // 42
 >
 > Paketleriniz bundan çok daha farklı gözükecektir.
 
-Eğer [Create React App](https://github.com/facebookincubator/create-react-app),
-[Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/)
+Eğer [Create React App](https://create-react-app.dev/),
+[Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/)
 ya da benzeri bir araç kullanıyorsanız, uygulamanızı paketleyen bir Webpack
 kurulumuna sahip olursunuz.
 
diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
@@ -35,33 +35,11 @@ For example, a test for [`setInnerHTML.js`](https://github.com/facebook/react/bl
 
 ### Warnings and Invariants {#warnings-and-invariants}
 
-The React codebase uses the `warning` module to display warnings:
+The React codebase uses `console.error` to display warnings:
 
 ```js
-var warning = require('warning');
-
-warning(
-  2 + 2 === 4,
-  'Math is not working today.'
-);
-```
-
-**The warning is shown when the `warning` condition is `false`.**
-
-One way to think about it is that the condition should reflect the normal situation rather than the exceptional one.
-
-It is a good idea to avoid spamming the console with duplicate warnings:
-
-```js
-var warning = require('warning');
-
-var didWarnAboutMath = false;
-if (!didWarnAboutMath) {
-  warning(
-    2 + 2 === 4,
-    'Math is not working today.'
-  );
-  didWarnAboutMath = true;
+if (__DEV__) {
+  console.error('Something is wrong.');
 }
 ```
 
@@ -114,39 +92,6 @@ ReactRef.detachRefs = function(
 When possible, new code should use Flow annotations.
 You can run `yarn flow` locally to check your code with Flow.
 
-### Dynamic Injection {#dynamic-injection}
-
-React uses dynamic injection in some modules. While it is always explicit, it is still unfortunate because it hinders understanding of the code. The main reason it exists is because React originally only supported DOM as a target. React Native started as a React fork. We had to add dynamic injection to let React Native override some behaviors.
-
-You may see modules declaring their dynamic dependencies like this:
-
-```js
-// Dynamically injected
-var textComponentClass = null;
-
-// Relies on dynamically injected value
-function createInstanceForText(text) {
-  return new textComponentClass(text);
-}
-
-var ReactHostComponent = {
-  createInstanceForText,
-
-  // Provides an opportunity for dynamic injection
-  injection: {
-    injectTextComponentClass: function(componentClass) {
-      textComponentClass = componentClass;
-    },
-  },
-};
-
-module.exports = ReactHostComponent;
-```
-
-The `injection` field is not handled specially in any way. But by convention, it means that this module wants to have some (presumably platform-specific) dependencies injected into it at runtime.
-
-There are multiple injection points in the codebase. In the future, we intend to get rid of the dynamic injection mechanism and wire up all the pieces statically during the build.
-
 ### Multiple Packages {#multiple-packages}
 
 React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
@@ -211,9 +156,7 @@ Its source code is located in [`packages/react-reconciler`](https://github.com/f
 
 ### Event System {#event-system}
 
-React implements a synthetic event system which is agnostic of the renderers and works both with React DOM and React Native. Its source code is located in [`packages/legacy-events`](https://github.com/facebook/react/tree/master/packages/legacy-events).
-
-There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins).
+React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/master/packages/react-dom/src/events).
 
 ### What Next? {#what-next}
 
diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
@@ -229,7 +229,7 @@ function FriendListItem(props) {
 }
 ```
 
-Bu bileşenlerin state'leri birbirinden tamamen bağımsızdır. Hooklar *state'le alakalı davranışların* tekrar kullanılmasının bir yoludur, state'in yeniden kullanılmasıyla alakalı değildir. Hatta bir Hook her çağırıldığında tamamen ayrı bir state'e sahiptir -- bu sayede özel Hook'unuzu bir bileşen içerisinde iki kere çağırabilirsiniz.
+Her bileşenin state'i birbirinden tamamen bağımsızdır. Hooklar *state'le alakalı davranışların* tekrar kullanılmasının bir yoludur, state'in yeniden kullanılmasıyla alakalı değildir. Hatta bir Hook her çağırıldığında tamamen ayrı bir state'e sahiptir -- bu sayede özel Hook'unuzu bir bileşen içerisinde iki kere çağırabilirsiniz.
 
 Özel Hook'larınız bir özellikten daha çok bir kural gibidir. Eğer bir fonksiyonun adı "`use`" ile başlıyor ve başka Hook'ları çağırıyorsa, bu fonksiyon bir özel Hook'tur diyoruz. `useSomething` adlandırması linter eklentimizin, Hook kullanılarak yazılan kodda bugları bulmasını sağlıyor.
 
diff --git a/content/docs/release-channels.md b/content/docs/release-channels.md
@@ -94,7 +94,7 @@ Denemeye karşı entegrasyon testleri yapmayı değerli bulabilirsiniz. Bu size
 
 #### Deneysel Özellikler Hakkında Nasıl Daha Fazla Bilgi Edinebilirim? {#how-can-i-learn-more-about-experimental-features}
 
-Deneysel özellikler belgelenebilir veya belgelenmeyebilir. Genellikle, deneyler Sonraki veya İstikrarlı'ya gönderime yakın olana kadar belgelenmez.
+Deneysel özellikler belgelenebilir veya belgelenmeyebilir. Genellikle, deneyler Sonrakine veya En yeni'ye gönderime yakın olana kadar belgelenmez.
 
 Bir özellik belgelenmezse, bir [RFC](https://github.com/reactjs/rfcs) eşlik edebilir.
 
diff --git a/flow-typed/gatsby-plugin-google-analytics.js b/flow-typed/gatsby-plugin-google-analytics.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+declare module 'gatsby-plugin-google-analytics' {
+  declare module.exports: {
+    trackCustomEvent: (...params: any) => void,
+  };
+}
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "unist-util-visit": "^1.1.3"
   },
   "engines": {
-    "node": "12.x.x",
+    "node": "12.x.x || 14.x.x",
     "yarn": "^1.3.2"
   },
   "homepage": "https://tr.reactjs.org/",
diff --git a/src/components/FeedbackForm/FeedbackForm.js b/src/components/FeedbackForm/FeedbackForm.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+// $FlowExpectedError
+import React, {useState} from 'react';
+import {trackCustomEvent} from 'gatsby-plugin-google-analytics';
+import {sharedStyles} from 'theme';
+
+const FeedbackForm = () => {
+  const [feedbackGiven, setFeedbackGiven] = useState(false);
+
+  if (feedbackGiven) {
+    return 'Thanks for letting us know!';
+  } else {
+    return (
+      <span>
+        Is this page useful?
+        <button
+          css={[sharedStyles.articleLayout.feedbackButton, {marginLeft: '6px'}]}
+          aria-label="Yes"
+          onClick={e => {
+            e.preventDefault();
+            trackCustomEvent({
+              category: 'Feedback Button',
+              action: 'feedback',
+              label: window.location.pathname,
+              value: 1,
+            });
+            setFeedbackGiven(true);
+          }}>
+          <svg
+            css={{
+              transform: 'translateY(0.1em)',
+            }}
+            focusable="false"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 81.13 89.76">
+            <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+          </svg>
+        </button>
+        <button
+          css={[sharedStyles.articleLayout.feedbackButton, {marginLeft: '3px'}]}
+          aria-label="No"
+          onClick={e => {
+            e.preventDefault();
+            trackCustomEvent({
+              category: 'Feedback Button',
+              action: 'feedback',
+              label: window.location.pathname,
+              value: 0,
+            });
+          }}>
+          <svg
+            css={{
+              transform: 'scale(-1, -1) translateY(-.6em)',
+            }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 81.13 89.76">
+            <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+          </svg>
+        </button>
+      </span>
+    );
+  }
+};
+
+export default FeedbackForm;
diff --git a/src/components/FeedbackForm/index.js b/src/components/FeedbackForm/index.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ */
+
+import FeedbackForm from './FeedbackForm';
+
+export default FeedbackForm;
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
@@ -44,7 +44,6 @@ class DocSearch extends Component<{}, State> {
           alignItems: 'center',
           paddingLeft: '0.25rem',
           paddingRight: '0.25rem',
-
           [media.lessThan('expandedSearch')]: {
             justifyContent: 'flex-end',
             marginRight: 10,
@@ -56,6 +55,7 @@ class DocSearch extends Component<{}, State> {
           // },
           [media.greaterThan('expandedSearch')]: {
             minWidth: 100,
+            width: 'calc(100% / 5)',
           },
         }}>
         <input
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
@@ -12,10 +12,12 @@ import NavigationFooter from 'templates/components/NavigationFooter';
 import React from 'react';
 import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import FeedbackForm from 'components/FeedbackForm';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
 import {sharedStyles} from 'theme';
 import createCanonicalUrl from 'utils/createCanonicalUrl';
+import {colors} from 'theme';
 
 import type {Node} from 'types';
 
@@ -74,6 +76,7 @@ const MarkdownPage = ({
       }}>
       <TitleAndMetaTags
         ogDescription={ogDescription}
+        ogType="article"
         canonicalUrl={createCanonicalUrl(markdownRemark.fields.slug)}
         title={`${titlePrefix}${titlePostfix}`}
       />
@@ -113,6 +116,16 @@ const MarkdownPage = ({
 
                 {markdownRemark.fields.path && (
                   <div css={{marginTop: 80}}>
+                    <span
+                      css={{
+                        whiteSpace: 'nowrap',
+                        paddingBottom: '1em',
+                        marginRight: '36px',
+                        display: 'inline-block',
+                        color: colors.subtle,
+                      }}>
+                      <FeedbackForm />
+                    </span>
                     <a
                       css={sharedStyles.articleLayout.editLink}
                       href={`https://github.com/reactjs/tr.reactjs.org/tree/master/${markdownRemark.fields.path}`}>
diff --git a/src/components/TitleAndMetaTags/TitleAndMetaTags.js b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
@@ -17,6 +17,7 @@ type Props = {
   title: string,
   ogDescription: string,
   canonicalUrl: string,
+  ogType: string,
 };
 
 // only provide alternate links to pages in languages where 95-100% of core content has been translated
@@ -45,11 +46,16 @@ const defaultPage = canonicalUrl => {
   return canonicalUrl.replace(urlRoot, 'https://reactjs.org');
 };
 
-const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
+const TitleAndMetaTags = ({
+  title,
+  ogDescription,
+  canonicalUrl,
+  ogType = 'website',
+}: Props) => {
   return (
     <Helmet title={title}>
       <meta property="og:title" content={title} />
-      <meta property="og:type" content="website" />
+      <meta property="og:type" content={ogType} />
       {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
       <meta property="og:image" content="https://reactjs.org/logo-og.png" />
       <meta
diff --git a/src/theme.js b/src/theme.js
@@ -168,20 +168,46 @@ const sharedStyles = {
         zIndex: 2,
       },
     },
-
+    feedbackButton: {
+      border: 0,
+      background: 'none',
+      cursor: 'pointer',
+      ':focus': {
+        color: colors.text,
+        borderColor: colors.text,
+        '& svg': {
+          fill: colors.text,
+        },
+      },
+      ':hover': {
+        color: colors.text,
+        borderColor: colors.text,
+        '& svg': {
+          fill: colors.text,
+        },
+      },
+      '& svg': {
+        height: '1.5em',
+        width: '1.5em',
+        fill: colors.subtle,
+        transition: 'fill 0.2s ease',
+      },
+    },
     editLink: {
-      color: colors.subtle,
+      color: colors.lighter,
       borderColor: colors.divider,
-      transition: 'all 0.2s ease',
-      transitionPropery: 'color, border-color',
+      transition: 'color 0.2s ease, border-color 0.2s ease',
       whiteSpace: 'nowrap',
       borderBottomWidth: 1,
       borderBottomStyle: 'solid',
-
       ':hover': {
         color: colors.text,
         borderColor: colors.text,
       },
+      ':focus': {
+        color: colors.text,
+        borderColor: colors.text,
+      },
     },
   },
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -40,8 +40,8 @@ console.log(add(16, 26)); // 42`
`40`	`40`	`>`
`41`	`41`	`> Paketleriniz bundan çok daha farklı gözükecektir.`
`42`	`42`
`43`		`-Eğer [Create React App](https://github.com/facebookincubator/create-react-app),`
`44`		`-[Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/)`
	`43`	`+Eğer [Create React App](https://create-react-app.dev/),`
	`44`	`+[Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/)`
`45`	`45`	`ya da benzeri bir araç kullanıyorsanız, uygulamanızı paketleyen bir Webpack`
`46`	`46`	`kurulumuna sahip olursunuz.`
`47`	`47`
Original file line number	Diff line number	Diff line change
`@@ -229,7 +229,7 @@ function FriendListItem(props) {`
`229`	`229`	`}`
`230`	`230`	```
`231`	`231`
`232`		`-Bu bileşenlerin state'leri birbirinden tamamen bağımsızdır. Hooklar state'le alakalı davranışların tekrar kullanılmasının bir yoludur, state'in yeniden kullanılmasıyla alakalı değildir. Hatta bir Hook her çağırıldığında tamamen ayrı bir state'e sahiptir -- bu sayede özel Hook'unuzu bir bileşen içerisinde iki kere çağırabilirsiniz.`
	`232`	`+Her bileşenin state'i birbirinden tamamen bağımsızdır. Hooklar state'le alakalı davranışların tekrar kullanılmasının bir yoludur, state'in yeniden kullanılmasıyla alakalı değildir. Hatta bir Hook her çağırıldığında tamamen ayrı bir state'e sahiptir -- bu sayede özel Hook'unuzu bir bileşen içerisinde iki kere çağırabilirsiniz.`
`233`	`233`
`234`	`234`	Özel Hook'larınız bir özellikten daha çok bir kural gibidir. Eğer bir fonksiyonun adı "`use`" ile başlıyor ve başka Hook'ları çağırıyorsa, bu fonksiyon bir özel Hook'tur diyoruz. `useSomething` adlandırması linter eklentimizin, Hook kullanılarak yazılan kodda bugları bulmasını sağlıyor.
`235`	`235`