		# React Stateful Function
		<!-- ![npm][npmDownloads] -->
		![PRsBadge] ![npm][npmLicense] ![npm][npmVersion]
		##### Requires React version =< 16.8 to work
		![npm][npmDownloads] ![PRsBadge] ![npm][npmLicense] ![npm][npmVersion]

		### Implement react state into your function component in just One Step!

		- Use funcDidMount instead of componentDidMount
		- Use funcWillUnmount instead of componentWillUnmount
		- Use funcDidUpdate which is easier than of componentDidUpdate
		- Construct your state and update it inside any function component
		- Use useDidMount instead of componentDidMount
		- Use useWillUnmount instead of componentWillUnmount
		- Use useDidUpdate which is easier than of componentDidUpdate
		- Initialize your state and update it inside any function component
		- Very simple way to change state, just like Component setState !
		@@ -30,5 +30,11 @@ - No hooks background needed at all, just import and use!
		import React from 'react';
		import { constructState, funcDidMount, funcWillUnmount, funcDidUpdate } from 'react-stateful-function';

		import {
		useInitialState,
		useDidMount,
		useWillUnmount,
		useDidUpdate
		} from 'react-stateful-function';


		const MyStatefulComponent = (props) => {
		@@ -40,3 +46,3 @@
		resetState, // <= Reset state to its initial values
		} = constructState({ count: 0, toggle: false }); // <= Initialize state, just like this.state={} !
		} = useInitialState({ count: 0, toggle: false }); // <= Initialize state, just like this.state={} !

		@@ -47,3 +53,3 @@

		funcDidMount(() => {
		useDidMount(() => {

		@@ -54,3 +60,3 @@ // ComponentDidMount replacement

		funcWillUnmount(() => {
		useWillUnmount(() => {

		@@ -61,8 +67,9 @@ // ComponentWillUnmount replacement

		funcDidUpdate([count], () => {
		useDidUpdate([count], () => {

		// ComponentDidUpdate replacement
		// Comparing values' changes within renders
		// Will be called if `count` value is changed
		// You can make more `funcDidUpdate` with other values
		// Will be called if array values are changed
		// You can make more than one `useDidUpdate` hooks
		// Or Add new variables inside `values` array to call same action

		@@ -69,0 +76,0 @@ });

src/index.ts

		@@ -1,4 +0,4 @@
		export * from './constructState';
		export * from './funcDidMount';
		export * from './funcWillUnmount';
		export * from './functDidUpdate';
		export * from './useInitialState';
		export * from './useDidMount';
		export * from './useWillUnmount';
		export * from './usetDidUpdate';

src/constructState.ts

src/funcDidMount.ts

src/functDidUpdate.ts

src/funcWillUnmount.ts

example.tsx

Sorry, the diff of this file is not supported yet

react-stateful-function - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics