简体   繁体   中英

Component Palette Custom Hook

I am fairly new to React and still wrapping my head around custom-hooks . I cam across a code where a custom hook was created to handle the component imports.

useComponentPalette.js

import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'

const defaultComponents = {
TodoEditor,
TodoItem,
TodoList,
CheckBox
}

export function useComponentPalette(){
return defaultComponents
}

And then in order to use the hook,

const {TodoItem, TodoList, Checkbox } = useComponentPalette()

My Question:- Does this approach provides any advantage over the regular imports in the component? or this is an anti-pattern?

How I usually import the components is as follows

import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'

function App(){
return(
<>
<TodoList/>
</>
)
}

It's not a good idea to use react hooks like this you can get the same result without react hook

// first file name.js
import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'

export default {
TodoEditor,
TodoItem,
TodoList,
CheckBox
}
//component file

import * as Component form 'first file name'; 
//<Component.TodoEditor/>
//or
import {TodoEditor} form 'first file name'; 

The way that I use react-hooks is for making my code more dry and increase it's readability, so react-hooks is not good fit for this kind of usage.

Hi @Sachin ,

In my option, React JS use hook to manage reuse stateful logic between components . In other word, Hooks do well to encapsulating state and share logic. If you want to do some stateful logic or condition base logic with these components, then it's fine with that. But if you are using just without condition in the given components. Then, This Is useless for making the custom hook. You can do that without a custom hook in a simpler way.

Here is a simple way to do that:-

In components folder. I create index file, this is the entry point of all my exporting components

文件夹结构

In that file. I export all my components, as you can see.

索引文件

I use that components like this. It much better way. In my option.

import { Header, Footer, Sider } from "./components"

before using react custom hooks, we should be aware of the rationale behind it.

Customs hooks functionality was provided to reuse stateful logic. If logic doesn't require any state, we will use simple functions and if it is about components only there there are different patterns for making code general and scaleable.

So, there is no usage of custom hook in above case at all. For me, I would go with the following code for above scenario:

// components/index.tsx

import {Todo} from './todo'
import {CheckBox} from './components/CheckBox'

export {
 Todo,
 CheckBox
}
// componentns/todo/index.tsx

import {Editor} from './Editor'
import {Item} from './Item'
import {List} from './List'

const Todo = {
  Editor,
  Item,
  List
}

export default Todo;

and usage will be like

import { Checkbox, Todo } from "components"
...
<Checkbox ... />
<Todo.List ...>
 <Todo.Item ... >
  </Todo.Editor ... />
 </Todo.Item ... >
</Todo.List>
...

PS Usage can be different based upon the logic of components, just giving an hint how we can patterns to serve our purpose.

Hope it helps.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM