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 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