react-enhancer
https://reactjs.org/docs/hooks-reference.html#usestate
Using state(defaultValue), referimport React from "react";import render from "react-dom";import stateful from "react-enhancer"; const App = ; ;
https://reactjs.org/docs/hooks-reference.html#useref
Using ref(), referimport React from "react";import render from "react-dom";import stateful from "react-enhancer"; const App = ; ;
https://reactjs.org/docs/hooks-reference.html#useeffect
Using effect(factory, inputs), referThe default behavior for effects is to fire the effect once after completed render. That way an effect is always recreated if one of its inputs changes.
import React from "react";import render from "react-dom";import stateful from "react-enhancer"; const App = ; ;
Using use() to invoke custom hook
import React from "react";import render from "react-dom";import stateful from "react-enhancer"; const userInfoHook = effect state name const userInfo setUserInfo = ; ; return userInfo;; const App = ; ;
https://reactjs.org/docs/hooks-reference.html#usememo
Using memo(factory, inputs), referimport React from "react";import render from "react-dom";import stateful from "react-enhancer"; const App = ; ;
Using context() to create simple todo app
import React from "react";import render from "react-dom";import stateful from "react-enhancer"; const initialState = id: 1 text: "item 1" id: 2 text: "item 2" ; const reducer = state action if actiontype === "add" return ...state id: text: actionpayload ; if actiontype === "remove" return state; if actiontype === "toggle" return state; return state;; const TodoForm = ; const TodoList = ; const App = ; ;
Using reducer(reducer, initialState) to create todo app
import React from "react";import render from "react-dom";import stateful from "react-enhancer"; const initialState = id: 1 text: "item 1" id: 2 text: "item 2" ; const appReducer = state type payload if type === "add" return ...state id: text: payload ; if type === "remove" return state; if type === "toggle" return state; return state;; const TodoForm = ; const TodoList = ; const handleTodosChange = consolelog; const App = ; ;
Using store({ initialState, middleware, reducer, onChange }) to create redux like store
const TodoList = ; const handleStateChanged = console;const loggerMiddleware = ; const App = ;