diff --git a/README.md b/README.md index 151fb85..239e946 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_835 TILs and counting..._ +_836 TILs and counting..._ --- @@ -557,6 +557,7 @@ _835 TILs and counting..._ - [Formik's Validation Schema As A Function](react/formiks-validation-schema-as-a-function.md) - [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md) - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md) +- [Manage State In A Functional Component](react/manage-state-in-a-functional-component.md) - [Mapping Over One Or Many Children](react/mapping-over-one-or-many-children.md) - [Mock A Function That A Component Imports](react/mock-a-function-that-a-component-imports.md) - [Navigate With State Via @reach/router](react/navigate-with-state-via-reach-router.md) diff --git a/react/manage-state-in-a-functional-component.md b/react/manage-state-in-a-functional-component.md new file mode 100644 index 0000000..56331b6 --- /dev/null +++ b/react/manage-state-in-a-functional-component.md @@ -0,0 +1,47 @@ +# Manage State In A Functional Component + +Before the introduction of React 16.8, you had a couple options for declaring +and managing state in your components. + +The first _class_ way was to create a class component and then [add local, +component state to +it](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class). + +If you already had a functional component, you could avoid the conversion to a +class component with custom HOCs and Render Prop components or any number of +third-party libraries such as [React +PowerPlug](http://rena.to/react-powerplug/#/docs-components-state) and +[Recompose](https://github.com/acdlite/recompose). + +However, projects using React 16.8+ have +[Hooks](https://reactjs.org/docs/hooks-intro.html) at their disposal. The Hooks +API's base offering is a state hook -- +[`useState`](https://reactjs.org/docs/hooks-state.html). + +```javascript +import React, { useState } from "react"; + +const Toggler = () => { + const [on, setOn] = useState(false); + const [toggleCount, setToggleCount] = useState(0); + + const incrementToggleCount = setToggleCount(prev => prev + 1); + const handleToggle = () => { + setOn(prev => !prev); + incrementToggleCount(); + }; + + return ( + + + +

Toggle Count: {toggleCount}

+
+ ); +} +``` + +You can manage a variety of state values in a functional component with +`useState`. The `useState` function takes the initial state value as an +argument and returns a tuple with the current state value and an _setter_ +function for updating that piece of state.