React Hooks are currently available in the release of . alpha react@16.7.0-alpha.0 In this article, we will attempt to understand what is and rules we have to follow when using them. Plus we will create a counter application using React Hooks useState React Hook. What are React Hooks? React Hooks are functions that let us hook into the React state and lifecycle features from function components. By this, we mean that hooks allow us to easily manipulate the state of our functional component without needing to convert them into class components. Hooks don’t work inside classes( ). By using them, we can totally avoid using lifecycle methods, such as , , . Instead, we will use built-in hooks like . because they let you use React without classes componentDidMount componentDidUpdate componentWillUnmount useEffect Basic Built-in Hooks : Returns a stateful value and a function to update it — useState Lets you perform side effects in function components — useEffect Accepts a context object (the value returned from ) and returns the current context value, as given by the nearest context provider for the given context — React.createContext useContext Rules of Hooks Hooks are JavaScript functions, but they impose two additional rules: Don’t call Hooks inside loops, conditions, or nested functions — Only call Hooks at the top level . Don’t call Hooks from regular JavaScript functions — Only call Hooks . from React function components Let’s dive in and see how useState hook feature works. To start, create a new React app called using . counter create-react-app $ npx create-react-app counter$ cd counter$ npm start Since React Hooks are currently available in the alpha release we have to install react and react-dom again. $ npm install -s react@1 6.7.0-alpha.0 react-dom@16.7.0-alpha.0 counter app Now we need to create component and a button to update the counter. And set an initial state (count) within to the value of 0. And add an event handler so that whenever the button is clicked, the is increased by 1. Counter Counter count We call the Hook directly inside our component: useState declares a . The only argument to the Hook is the initial state. const [count, setCount] = useState(0); state variable useState() returns a pair of values: the current state and a function that updates it. This is why we write . This is similar to and in a class. useState const [count, setCount] = useState() this.state.count this.setState You can use the State Hook more than once in a single component: function ExampleWithManyStates() { const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);} The array destructuring syntax lets us give different names to the state variables we declared by calling . These names aren’t a part of the API. const [count, setCount] = useState(0); useState useState Here you can find a working example for React Hook useState: https://github.com/jscodelover/react-hooks Follow me on , or . Twitter LinkedIn GitHub I hope this article is useful to you. Thanks for reading & Keep Coding !!
