React docs on "Building Your Own Hooks"

Please provide guidance if returning elements (or ()=>elements) from custom hook is a good practice or not.

We have a PageLayout component like the following in our own app:

    <PageLayout
      topBarButtons={..}
      onRender={..}
    />

We want to encapsulate topBarButtons and onRender logic within a custom hook, so that the hook is reusable and shippable without PageLayout. (topBarButtons and onRender will share some state, and useOurHook returns [topBarButtons, onRenderFunc]).

This works fine, if not perfect, for me. But since there are so few custom hook example that returns UI elements (or function that returns UI elements like onRender), the team have doubt about this pattern.

I know the doc has the following statement, but I think this is a very common scenario that deserves a sentence or two in the React docs.

"useYourImagination()
Custom Hooks offer the flexibility of sharing logic that wasn’t possible in React components before. You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven’t considered."

Bắt đầu với trang tài liệu "Building Your Own Hooks" và xem lại các hướng dẫn cũng như ví dụ hiện có về các Hooks tùy chỉnh. Thêm một giải thích ngắn gọn về việc trả về các phần tử hoặc các hàm trả về các phần tử có phải là một pattern phù hợp hay không, bao gồm cả kịch bản trạng thái dùng chung được mô tả ở đây; trang này phải trả lời câu hỏi của nhóm mà không yêu cầu ngữ cảnh dành riêng cho ứng dụng của issue này.