How to use the useState function from react

Find comprehensive JavaScript react.useState code examples handpicked from public code repositorys.

178
179
180
181
182
183
184
185
186
187
188
});
Accordion.displayName = 'Accordion';


let current = 0;
const useIdShim = () => {
  const [id, setId] = react.useState();
  react.useEffect(() => setId(++current), []);
  return id && `${ACCORDION_PREFIX}-${id}`;
};
const _useId = react.useId || useIdShim;
fork icon4
star icon84
watch icon0

1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
    callbackSuccess = _ref22.callbackSuccess,
    refreshKey = _ref22.refreshKey;

if (name) checkKey(name, 'reducer name', 'string', 'valid string'); // const store = useStore();

var _useState = React.useState({}),
    _useState2 = _slicedToArray(_useState, 1),
    _key = _useState2[0];

React.useEffect(function () {
fork icon6
star icon9
watch icon3

+ 15 other calls in file

6
7
8
9
10
11
12
13
14
15

function SideBar (props) {
    const data = props.data.get;
    if (!data.user) return <></>;
    const [sidebar, setSidebar] = React.useState({ type: 'contacts', id: ''});
    const [searchInput, setSearchInput] = React.useState('');
    const [searchTimeout, setSearchTimeout] = React.useState(0);
    const [callTimeInt, setCallTimeInt] = React.useState(0);
    const callTimeRef = React.useRef();
    const searchRef = React.useRef();
fork icon0
star icon3
watch icon1

+ 7 other calls in file

11
12
13
14
15
16
17
18
19
20
    height: mainElement.offsetHeight
  }
}

function useComponentSize(ref) {
  let [ComponentSize, setComponentSize] = useState(getSize(ref.current))
  let mainElement = useRef()
  let asideElement = useRef()
  const handleResize = () => {
    if (ref && ref.current) {
fork icon263
star icon0
watch icon1

32
33
34
35
36
37
38
39
40
41
const toast = useToast();
const [, , , toggleFullscreen] = useFullscreen();
const [casting, setCasting] = React.useState(() => {
    return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED;
});
const [immersed, setImmersed] = React.useState(true);
const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
fork icon129
star icon1
watch icon0

+ 5 other calls in file

23
24
25
26
27
28
29
30
31
32
const discover = useDiscover(urlParams, queryParams);
const [selectInputs, paginationInput] = useSelectableInputs(discover);
const profile = useProfile();
const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
const [selectedMetaItem, setSelectedMetaItem] = React.useState(() => {
    return getMetaItemAtIndex(discover.catalog_resource, 0);
});
const metaItemsOnFocusCapture = React.useCallback((event) => {
    const metaItem = getMetaItemAtIndex(discover.catalog_resource, event.target.dataset.index);
fork icon129
star icon0
watch icon1

31
32
33
34
35
36
37
38
39
40
});
const [immersed, setImmersed] = React.useState(true);
const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
const [error, setError] = React.useState(null);
const [videoState, setVideoState] = React.useReducer(
    (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
    {
        paused: null,
fork icon129
star icon0
watch icon0

+ 5 other calls in file

61
62
63
64
65
66
67
68
69
  };
}

function usePosition(ref) {
  let { top, left } = getPosition(ref.current);
  let [ElementPosition, setElementPosition ] = useState({
    top: top,
    left: left,
  });
fork icon5
star icon23
watch icon0

903
904
905
906
907
908
909
910
911
912
var StyledImage = styled__default['default'].img(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n"])));
var Placeholder = styled__default['default'].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
var Image = function (_a) {
    var src = _a.src, alt = _a.alt, otherProps = __rest(_a, ["src", "alt"]);
    var imgRef = React.useRef(null);
    var _b = React.useState(false), isLoaded = _b[0], setIsLoaded = _b[1];
    React.useEffect(function () {
        var img = imgRef.current;
        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
fork icon1
star icon1
watch icon0

+ 17 other calls in file

4
5
6
7
8
9
10
11
12
13
14
15


const { createContext, useState, useEffect } = require("react");
export const DataContext = createContext(null);


const MyContext = ({ children }) => {
  const [pageChange, setClose] = useState(false);
  const [data, setData] = useState();
  const [who, setWho] = useState();
  const { data: session } = useSession();

fork icon0
star icon1
watch icon1

+ 8 other calls in file

8
9
10
11
12
13
14
15
16
17
const styles = require('./styles');

const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
    const disabled = volume === null || isNaN(volume);
    const routeFocused = useRouteFocused();
    const [slidingVolume, setSlidingVolume] = React.useState(null);
    const resetVolumeDebounced = React.useCallback(debounce(() => {
        setSlidingVolume(null);
    }, 100), []);
    const onSlide = React.useCallback((volume) => {
fork icon129
star icon0
watch icon1

327
328
329
330
331
332
333
334
335
336
337
  WithHovering.displayName = "WithHovering(" + name + ")";
  return WithHovering;
};


var useItems = function useItems(menuRef, focusRef) {
  var _useState = react.useState(),
    hoverItem = _useState[0],
    setHoverItem = _useState[1];
  var stateRef = react.useRef({
    items: [],
fork icon48
star icon881
watch icon6

+ 9 other calls in file

1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
  id,
  spawn,
  roundToSeconds
}) => {
  const isMounted = useIsMounted();
  const [value, _setValue] = React.useState(void 0);
  const identity = {
    id,
    spawn
  };
fork icon1
star icon54
watch icon1

+ 3 other calls in file

979
980
981
982
983
984
985
986
987
988
  const modelFn = typeof model === "function" ? model : () => model;
  const memo2 = modelFn();
  subscribe(memo2);
  return memo2;
};
const [memo, setMemo] = React.useState(defer ? { ...model, isDeferred: true } : createMemo);
React.useEffect(() => {
  if (!isInitedRef.current) {
    return;
  }
fork icon1
star icon54
watch icon1

+ 11 other calls in file

101
102
103
104
105
106
107
108
109
    onSelect = _ref.onSelect,
    options = _ref.options,
    placeholder = _ref.placeholder,
    style = _ref.style;

var _useState = React.useState(options),
    _useState2 = _slicedToArray(_useState, 2),
    inputItems = _useState2[0],
    setInputItems = _useState2[1];
fork icon5
star icon16
watch icon12

468
469
470
471
472
473
474
475
476
477
478
const xin = new Proxy(registry, regHandler());


// TODO declare type the way it's declated for useState so that TypeScript
// passes through type of initialValue to the right thing
const useXin = (path, initialValue = '') => {
    const [value, update] = react.useState(xin[path] !== undefined ? xin[path] : initialValue);
    react.useEffect(() => {
        const observer = () => {
            update(xin[path]);
        };
fork icon0
star icon3
watch icon2

+ 7 other calls in file

2
3
4
5
6
7
8
9
10
11
12
import { auth, db } from "../firebase-app/firebase-config";
const { createContext, useContext, useState, useEffect } = require("react");


const AuthContext = createContext();
function AuthProvider(props) {
  const [userInfo, setUserInfo] = useState({});
  const value = { userInfo, setUserInfo };
  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
fork icon0
star icon0
watch icon1

17
18
19
20
21
22
23
24
25
26
var throttle_debounce_1 = require("throttle-debounce");
var useCurrencyList_1 = require("../hooks/useCurrencyList");
function SwapTokenListDialog(props) {
    var open = props.open, onClose = props.onClose, activeAddress = props.activeAddress, onSelect = props.onSelect, disabledAddresses = props.disabledAddresses;
    var tokens = useCurrencyList_1["default"]();
    var _a = react_2.useState(""), searchQuery = _a[0], setSearchQuery = _a[1];
    // eslint-disable-next-line react-hooks/exhaustive-deps
    var handleSearch = react_2.useCallback(throttle_debounce_1.debounce(200, false, function (e) {
        var query = e.target.value;
        setSearchQuery(query);
fork icon0
star icon0
watch icon1

+ 2 other calls in file

12
13
14
15
16
17
18
19
20
21
22
let localTheme;
const useTheme = () => {
  if (typeof window !== "undefined") {
    localTheme = localStorage.getItem("theme");
  }
  const [theme, setTheme] = useState(localTheme || "default");


  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
fork icon0
star icon0
watch icon1

41
42
43
44
45
46
47
48
49
50
var srcfunctions_1 = require("./srcfunctions");
require("./../App.css");
var axios_1 = require("axios");
var usersdata_json_1 = require("../usersdata.json");
function SignIn(props) {
    var _a = react_1.useState(""), login2 = _a[0], setlogin = _a[1];
    var _b = react_1.useState(false), isLoginUnique = _b[0], setisLoginUnique = _b[1];
    var _c = react_1.useState(""), password = _c[0], setpass = _c[1];
    var _d = react_1.useState(false), isPasswordOk = _d[0], setisPasswordOk = _d[1];
    var _e = react_1.useState(false), showAccountPage = _e[0], setshowAccountPage = _e[1];
fork icon0
star icon0
watch icon1

+ 5 other calls in file