TypeError: undefined is not a function (near '...(0, _react.useCallBack)...'). I don't know what's wrong with the usCallBack() function in my code

Question

I am getting this error if I am using useCallBack() in my code and after removing it then my filterScreen.js doesn't work.

I am trying to get and save the params in "save" using react-navigation and printing the values of filters in the console.

Below is my code:

import React, { useState, useEffect, useCallBack } from "react";
import { View, Text, StyleSheet, Switch } from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";

import CustomHeaderButton from "../component/CustomHeaderButton";

const Filters = (props) => {
  return (
    <View style={styles.filterContainer}>
      <Text>{props.label}</Text>
      <Switch value={props.state} onValueChange={props.Value} />
    </View>
  );
};

const FiltersScreen = (props) => {
  const { navigation } = props;
  const [isGlutenFree, setisGlutenFree] = useState(false);
  const [isLactoseFree, setisLactoseFree] = useState(false);
  const [isVegan, setisVegan] = useState(false);
  const [isVeg, setisVeg] = useState(false);

  const savedFilters = useCallBack(() => {
    const appliedFilters = {
      glutenFree: isGlutenFree,
      lactoseFree: isLactoseFree,
      vegan: isVegan,
      veg: isVeg,
    };
    console.log(appliedFilters);
  }, [isGlutenFree, isLactoseFree, isVegan, isVeg]);

  useEffect(() => {
    navigation.setParams({ save: savedFilters });
  }, [savedFilters]);

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Filter Available!</Text>
      <Filters
        label="Gluten-Free"
        state={isGlutenFree}
        Value={(newValue) => setisGlutenFree(newValue)}
      />
      <Filters
        label="Lactose-Free"
        state={isLactoseFree}
        Value={(newValue) => setisLactoseFree(newValue)}
      />
      <Filters
        label="Vegan"
        state={isVegan}
        Value={(newValue) => setisVegan(newValue)}
      />
      <Filters
        label="Veg"
        state={isVeg}
        Value={(newValue) => setisVeg(newValue)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: "center",
  },
  title: {
    fontFamily: "open-sans",
    fontSize: 22,
    margin: 20,
    textAlign: "center",
  },
  filterContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "80%",
    marginVertical: 10,
  },
});

FiltersScreen.navigationOptions = (navigationData) => {
  return {
    headerTitle: "Filter Meals",
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Menu"
          iconName="ios-menu"
          onPress={() => {
            navigationData.navigation.toggleDrawer();
          }}
        />
      </HeaderButtons>
    ),
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Save"
          iconName="ios-save"
          onPress={navigationData.navigation.getParam("save")}
        />
      </HeaderButtons>
    ),
  };
};

export default FiltersScreen;

I don't to how to solve this error and why I am getting this?

Answer 1

This happens because savedFilters is not a function.

useCallback does not return anything. Have updated the code for Filters, if you could have a look.

I have used useMemo to calculate currentFilters on any change and whenever your currentFilters change, it will automatically call the useEffect for navigation update.

const FiltersScreen = (props) => {
  const { navigation } = props;
  const [isGlutenFree, setisGlutenFree] = useState(false);
  const [isLactoseFree, setisLactoseFree] = useState(false);
  const [isVegan, setisVegan] = useState(false);
  const [isVeg, setisVeg] = useState(false);

  const selectedFilters = useMemo(() => {
    return {
      glutenFree,
      lactoseFree,
      vegan,
      veg
    };
  }, [glutenFree, lactoseFree, vegan, veg])

  useEffect(() => {
    navigation.setParams({ save: selectedFilters });
  }, [selectedFilters]);

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Filter Available!</Text>
      <Filters
        label="Gluten-Free"
        state={isGlutenFree}
        Value={(newValue) => setisGlutenFree(newValue)}
      />
      <Filters
        label="Lactose-Free"
        state={isLactoseFree}
        Value={(newValue) => setisLactoseFree(newValue)}
      />
      <Filters
        label="Vegan"
        state={isVegan}
        Value={(newValue) => setisVegan(newValue)}
      />
      <Filters
        label="Veg"
        state={isVeg}
        Value={(newValue) => setisVeg(newValue)}
      />
    </View>
  );
};