How to use the react.useState function in react

function Search(props) {
  const [filters, setFilters] = useState([]);
  const [createFileterShow, setCreateFileterShow] = useState(false);
  const [currentFilterId, setCurrentFilterId] = useState(undefined);
  const [filter, setFilter] = useState({});
  const [loading, setLoading] = useState(false);
  const [barFilters, setBarFilters] = useState([]);
  const [filterName, setFilterName] = useState('');
  const [deleteFilterShow, setDeleteFilterShow] = useState(false);
  const [editFilterShow, setEditFilterShow] = useState(false);

  const column = [
    {
      title: '名称',
      dataIndex: 'name',
      // width: '20%',
      render: name => (
        <div style="{{">
          
            </div>

const useFetch = (dataUrl, commentUrl, logUrl, assigneeUrl, currentAssigneeUrl) => {
  const [dataArr, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchUser = async () => {
    const retArr = [];
    setLoading(true);
    const data = await axios.get(dataUrl);
    retArr.push(data);
    // const comment = await axios.get(commentUrl);
    retArr.push(await axios.get(commentUrl));
    retArr.push(await axios.get(logUrl));
    retArr.push(await axios.get(assigneeUrl));
    setData(retArr);
    setLoading(false);
  }; 

  const getEditOrDeleteCommentPermission = () => {
    const { currentMenuType: { id, organizationId } } = AppState;

const handlePanelResize = panelSize => dispatch(setPanelSize(panelSize));
    const handleSetPanelMinimized = minimized =>
        dispatch(setPanelMinimized(minimized));

    const [hoveredPredicate, setHoveredPredicate] = React.useState(null);

    // TODO: updating graphUpdateHack will force Graphcontainer > D3Graph
    // to re-render, and before render it will refresh nodes/edges dataset.
    // When GraphParser creates a new node or edge the d3 renderer needs to
    // be notified, because they share nodes/edges arrays.
    // But right now d3 renderer and graphParser live in different components.
    // There's no way to send this notification.
    // Most likely solution - make d3 force layout a part of graphParser,
    // that way graphParser will be able to control/update it.
    const [graphUpdateHack, setGraphUpdateHack] = React.useState("");

    const graphParser =
        frame.action === "query" &&
        getGraphParser(tabResult && tabResult.response);

    const forceReRender = () => {
        const graph = graphParser.getCurrentGraph();
        setGraphUpdateHack(
            `${Date.now()} ${graph.edges.length} ${graph.nodes.length}`,
        );
    };

    const onShowMoreNodes = () => {
        graphParser.processQueue();
        forceReRender();
    };

const useDimensions = (): ScaledSize => {
    const [dimensions, setDimensions] = useState(Dimensions.get('window'))
    useEffect(() => {
        const listener = (
            ev: Parameters<
                Parameters[1]
            >[0],
        ) => {
            /*
            this fixes this issue:
            https://trello.com/c/iEtMz9TH/867-video-stretched-on-ios-and-android-crash-on-orientation-change

            this means we will never relayout on smaller screens. For now this is ok
            because our screen size assumptions are a 1:1 match with iphone/ipad and
            a good enough™ match on android

            a more elegant fix would be to detect when a full screen video/photo
            is playing, basically anything that enables rotation when

export function useMagnetometerUncalibrated(
	options: MagnetometerUncalibratedOptions = {}
): UseMagnetometerUncalibratedSignature {
	const [data, setData] = useState(options.initial);
	const [available, setAvailable] = useState();
	const { availability = true } = options;

	useEffect(() => {
		if (availability) {
			MagnetometerUncalibrated.isAvailableAsync().then(setAvailable);
		}

		if (options.interval !== undefined) {
			MagnetometerUncalibrated.setUpdateInterval(options.interval);
		}

		return MagnetometerUncalibrated.addListener(setData).remove;
	}, []);

	return [data, available];
}

export default function Avatar(props: Props) {
  const [isImageLoaded, setIsImageLoaded] = React.useState(true);
  const { name, outline, size, src, verified, icon = 'check-circle' } = props;
  const width = size ? sizes[size] : '100%';
  const height = size ? sizes[size] : '';

  const handleImageError = () => setIsImageLoaded(false);

  return (

onClose,
  isOpen,
  classes,
  safeAddress,
  safeName,
  ownerAddress,
  ownerName,
  owners,
  threshold,
  createTransaction,
  removeSafeOwner,
  enqueueSnackbar,
  closeSnackbar,
  safe,
}: Props) => {
  const [activeScreen, setActiveScreen] = useState('checkOwner')
  const [values, setValues] = useState({})

  useEffect(
    () => () => {
      setActiveScreen('checkOwner')
      setValues({})
    },
    [isOpen],
  )

  const onClickBack = () => {
    if (activeScreen === 'reviewRemoveOwner') {
      setActiveScreen('selectThreshold')
    } else if (activeScreen === 'selectThreshold') {
      setActiveScreen('checkOwner')
    }

const Speakers = () => {
  const [speakers, setSpeakers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const [searchText, setSearchText] = useState("");
  const [speakingSaturday, setSpeakingSaturday] = useState(true);
  const [speakingSunday, setSpeakingSunday] = useState(true);
  const [serverSideFilter, setServerSideFilter] = useState(false);

  function new1(rec) {
    if (
      (speakingSaturday && rec.speakingSaturday) ||
      (speakingSunday && rec.speakingSunday)
    ) {
      return (
        searchText.length === 0 ||
        `${rec.firstName} ${rec.lastName}`
          .toUpperCase()
          .indexOf(searchText.toUpperCase()) !== -1
      );
    }
    return false;

language,
  onResolved,
  onChange,
  onBlur,
}: MergeEditorProps) {
  const diffNavigator = React.useRef();
  const [mergeState, setMergeState] = React.useState({
    idx: -1,
    diffs: [],
  });

  /**
   * This must be a state or it will never update the editor when finalValue is modified
   */
  const [finalValue, setFinalValue] = React.useState(originalValue);
  const [modalState, setModalState] = React.useState({
    type: 'close',
  });

  React.useEffect(() => {
    setFinalValue(originalValue);
  }, [originalValue]);

  const handleDiffNavigator = React.useCallback(
    (navigator: ExtendedDiffNavigator) => (diffNavigator.current = navigator),
    [],
  );

  const onDiffChange = React.useCallback(() => {
    setMergeState(oldState => {
      const navigator = diffNavigator.current;
      if (navigator) {

function MessageInput(props: any) {
  const [value, setValue] = useState('');
  const [sendMessage] = useMutation(sendMessageMutation);

  return (
    <input>) =&gt; {
        if (e.key === 'Enter' &amp;&amp; value.length &gt; 0) {
          sendMessage({ variables: { message: value } });
          setValue('');
        }
      }}
      onChange={(e: ChangeEvent) =&gt;
        setValue(e.currentTarget.value)
      }
      placeholder="Type something and press Enter"
      p={2}
      value={value}